Можно ли использовать гладкую прокрутку для ссылок привязки, но без jQuery? Я создаю новый сайт, и я не хочу использовать jQuery.
Плавные ссылки привязки прокрутки БЕЗ jQuery
Ответ 1
Используя функцию здесь: анимацию JavaScript и изменив ее, чтобы изменить свойство (не только свойство стиля), вы можете попробовать что-то вроде этого:
function animate(elem, style, unit, from, to, time, prop) {
if (!elem) {
return;
}
var start = new Date().getTime(),
timer = setInterval(function () {
var step = Math.min(1, (new Date().getTime() - start) / time);
if (prop) {
elem[style] = (from + step * (to - from))+unit;
} else {
elem.style[style] = (from + step * (to - from))+unit;
}
if (step === 1) {
clearInterval(timer);
}
}, 25);
if (prop) {
elem[style] = from+unit;
} else {
elem.style[style] = from+unit;
}
}
window.onload = function () {
var target = document.getElementById("div5");
animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};
DEMO: https://jsfiddle.net/zpu16nen/
Удостоверьтесь, что размер окна достаточно маленький, поэтому на самом деле есть полоса прокрутки и может прокручиваться до 5-го div.
И нет, это не требовало воссоздания 25% jQuery.
Это, очевидно, очень сильно изменилось в зависимости от того, что на самом деле означает ваш вопрос (например, когда изменяется хэш окна или что-то в этом роде).
Обратите внимание, что с jQuery это легко:
$(document).ready(function () {
$("html, body").animate({
scrollTop: $("#div5").offset().top
}, 2000);
});
DEMO: http://jsfiddle.net/7TAa2/1/
Просто сказать...
Ответ 2
Расширение этого ответа: fooobar.com/questions/33843/...
После определения вашей функции scrollTo вы можете передать элемент, который хотите прокрутить в функции.
function scrollTo(element, to, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
Если у вас есть div с id = "footer"
<div id="footer" class="categories">…</div>
В script, который вы запускаете для прокрутки, вы можете запустить это,
elmnt = document.getElementById("footer");
scrollTo(document.body, elmnt.offsetTop, 600);
И у вас это есть. Плавная прокрутка без jQuery. Вы можете поиграть с этим кодом на консоли своего браузера и настроить его по своему вкусу.
Ответ 3
На самом деле, есть более легкий и простой способ сделать это: https://codepen.io/ugg0t/pen/mqBBBY
function scrollTo(element) {
window.scroll({
behavior: 'smooth',
left: 0,
top: element.offsetTop
});
}
document.getElementById("button").addEventListener('click', () => {
scrollTo(document.getElementById("8"));
});div {
width: 100%;
height: 200px;
background-color: black;
}
div:nth-child(odd) {
background-color: white;
}
button {
position: absolute;
left: 10px;
top: 10px;
}<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<button id="button">Button</button>Ответ 4
Использовать этот:
let element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
Ответ 5
Переходы CSS3 с селектором :target могут дать хороший результат без взлома JS. Я просто размышлял над тем, следует ли это делать, но без JQuery он становится немного грязным. Подробнее см. этот вопрос.
Ответ 6
Чистая легкая библиотека javascript: плавная прокрутка по github
Ответ 7
Вариант Vanilla js с использованием requestAnimationFrame с упрощениями и всеми поддерживаемыми браузерами:
const requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;
function scrollTo(to) {
const start = window.scrollY || window.pageYOffset
const time = Date.now()
const duration = Math.abs(start - to) / 3;
(function step() {
var dx = Math.min(1, (Date.now() - time) / duration)
var pos = start + (to - start) * easeOutQuart(dx)
window.scrollTo(0, pos)
if (dx < 1) {
requestAnimationFrame(step)
}
})()
}
Любое смягчение поддерживается!
Ответ 8
Моя любимая библиотека для прокрутки в настоящее время - Zenscroll из-за широкого спектра функций и небольшого размера (в настоящее время только 3,17 КБ).
В будущем, возможно, будет более целесообразно использовать встроенную функциональность scrollIntoView, но, поскольку сегодня на большинстве производственных площадок ее придется заполнять по причине отсутствия поддержки IE, я рекомендую использовать Zenscroll вместо этого во всех случаях.
Ответ 9
Поведение Smooth Scroll с полифиллом...
Пример:
document.querySelectorAll('a[href^="#"]').addEventListener("click", function(event) {
event.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({ behavior: "smooth" });
});
Репозиторий: https://github.com/iamdustan/smoothscroll
Ответ 10
вы можете использовать эту библиотеку javascript, чтобы добавить плавную прокрутку ко всем вашим внутренним ссылкам. Вы также можете добавить конфигурацию, чтобы обеспечить ссылки для игнорирования. У вас может быть подробный обзор. https://codingninjascodes.github.io/SmoothScrollJs/
Ответ 11
Это обновленная версия от @Ian
// Animated scroll with pure JS
// duration constant in ms
const animationDuration = 600;
// scrollable layout
const layout = document.querySelector('main');
const fps = 12; // in ms per scroll step, less value - smoother animation
function scrollAnimate(elem, style, unit, from, to, time, prop) {
if (!elem) {
return;
}
var start = new Date().getTime(),
timer = setInterval(function () {
var step = Math.min(1, (new Date().getTime() - start) / time);
var value = (from + step * (to - from)) + unit;
if (prop) {
elem[style] = value;
} else {
elem.style[style] = value;
}
if (step === 1) {
clearInterval(timer);
}
}, fps);
if (prop) {
elem[style] = from + unit;
} else {
elem.style[style] = from + unit;
}
}
function scrollTo(hash) {
const target = document.getElementById(hash);
const from = window.location.hash.substring(1) || 'start';
const offsetFrom = document.getElementById(from).offsetTop;
const offsetTo = target.offsetTop;
scrollAnimate(layout,
"scrollTop", "", offsetFrom, offsetTo, animationDuration, true);
setTimeout(function () {
window.location.hash = hash;
}, animationDuration+25)
};
// add scroll when click on menu items
var menu_items = document.querySelectorAll('a.mdl-navigation__link');
menu_items.forEach(function (elem) {
elem.addEventListener("click",
function (e) {
e.preventDefault();
scrollTo(elem.getAttribute('href').substring(1));
});
});
// scroll when open link with anchor
window.onload = function () {
if (window.location.hash) {
var target = document.getElementById(window.location.hash.substring(1));
scrollAnimate(layout, "scrollTop", "", 0, target.offsetTop, animationDuration, true);
}
}
Ответ 12
Вот простое решение в чистом JavaScript. Использует преимущества свойства прокрутки CSS : smooth
function scroll_to(id) {
document.documentElement.style.scrollBehavior = 'smooth'
element = document.createElement('a');
element.setAttribute('href', id)
element.click();
}
Использование:
Скажем, у нас есть 10 дел:
<div id='df7ds89' class='my_div'>ONE</div>
<div id='sdofo8f' class='my_div'>TWO</div>
<div id='34kj434' class='my_div'>THREE</div>
<div id='gbgfh98' class='my_div'>FOUR</div>
<div id='df89sdd' class='my_div'>FIVE</div>
<div id='34l3j3r' class='my_div'>SIX</div>
<div id='56j5453' class='my_div'>SEVEN</div>
<div id='75j6h4r' class='my_div'>EIGHT</div>
<div id='657kh54' class='my_div'>NINE</div>
<div id='43kjhjh' class='my_div'>TEN</div>
Мы можем перейти к выбранному идентификатору:
scroll_to('#657kh54')
Вы просто вызываете эту функцию в своем событии щелчка (например, нажмите кнопку, затем перейдите к div # 9).
Результат:
Конечно, в реальной жизни это выглядит намного плавнее.
К сожалению, IE и Safari не поддерживают scrollBehavior = 'smooth' с 2019 года
Ответ 13
Для всех, кто в 2019 году, сначала вы добавляете прослушиватель событий
document.getElementById('id').addEventListener('click', () => scrollTo())
затем вы целитесь в элемент и идете к нему плавно
function scrollTo() {
let target = document.getElementById('target');
target.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
})
}
Ответ 14
Попробуйте этот код здесь:
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});