Скрипт плавного скролла WordPress
Всем привет!
Недавно столкнулся с типичной задачей на сайте WordPress – нужно было сделать плавный скролл к целевому элементу на странице при нажатии на ссылку в меню сайта. Собственно, это – стандартный функционал любого современного лендинга. В нашем случае задача состояла в использовании чистого JavaScript без подключения внешних фреймворков, например, jQuery.
В сети есть не мало плагинов для WordPress для плавного скроллинга, например, https://ru.wordpress.org/plugins/tags/smooth-scroll
Но мы все знаем, что добавление любого плагина в наш сайт снижает его безопасность на взлом. В большинстве случаев сайты на WordPress взламываются именно через плагины – делаем выводы!
Итак, написан следующий код для медленного (плавного) скроллинга по странице:
document.addEventListener("click", function (event) {
var target = event.target;
if (event.target.getAttribute("href")) {
var targetHref = event.target.getAttribute("href")
} else return false;
if (targetHref.indexOf("#") >= 0) {
var pos = targetHref.indexOf("#") + 1;
var elemHref = document.getElementById(targetHref.slice(pos));
moveScroll(elemHref);
event.preventDefault()
};
});
function moveScroll(elem) {
var travel = 40;
var time = 10;
if (Math.abs(elem.getBoundingClientRect().top) < 1) return false;
if (elem.getBoundingClientRect().top < 0) {
if (Math.abs(elem.getBoundingClientRect().top) < travel) { window.scrollBy(0,-1); setTimeout(moveScroll,time/5,elem); } else { window.scrollBy(0,-travel); setTimeout(moveScroll,time,elem); } }; if (elem.getBoundingClientRect().top > 0) {
if (Math.abs(elem.getBoundingClientRect().top) < travel) {
window.scrollBy(0,1);
setTimeout(moveScroll,time/5,elem);
} else {
window.scrollBy(0,travel);
setTimeout(moveScroll,time,elem);
}
}
};
Функция скроллинга запускается рекурсивно через промежутки времени, равные time = 10 мс.
travel = 40 – это ход вертикального скроллинга при каждом рекурсивном вызове функции.
Представленный скрипт работает для ссылок вида:
About us
т.е. скрипт проверяет, есть ли в ссылке обращение к ID элемента, к которому, собственно, и прокрутиться наша страница.
На сегодня всё – спасибо за прочтение заметки!