Cделать плавный скролл на чистом JS

  • 1216
   
Разделы

Я не претендую на право называться автором всей размещенной здесь информации, так как некоторые моменты были заимствованы в доступных источниках и немного переработаны для удобства пользования.


По возможности указываю ссылки на источники.


Копируйте, комментируйте, переделывайте, пользуйтесь. Кому не жалко, оставляйте ссылку на источник.

Частный вебмастер по разработке сайтов на 1С Битрикс и WordPress

При реализации проекта на WordPress, я решил отказаться напрочь от применения библиотеки jQuery и написать все на чистом, ванильном JavaScript.

Все шло гладко, пока не пришло время реализовать плавный скролл по якорям. Если якорь на той же странице, что и меню, то нормально, а вот когда кнопка и якорь на разных страницах, начинается попа. У меня сайт многостраничный, соответственно для перехода к якорю на другой странице надо было сначала перейти на страницу якоря. Короче говоря, ссылки с якорями были вида /page/#anchor. Поиски в сети не дали результата, поэтому пришлось вникать.

Нашел код скролла на одной странице и переписал, чтобы перемещался по всему сайту. Пример возможно не самый качественный, но рабочий. Разобраться помогут комментарии.

// циклом собираем все ссылки, в которых есть scroll
document.querySelectorAll('.scroll').forEach(link => {
// вешаем клик на каждую ссылку
link.addEventListener('click', function(e) {
// обнуляем стандартное поведение
e.preventDefault();
let anchor = this.getAttribute('href').split('#')[1]; // получаем кусок после # // якорь
let local = this.getAttribute('href').split('#')[0]; // получаем кусок перед # // адрес страницы якоря
if (document.getElementById(`${anchor}`)) {
// если мы на странице где находятся якорь
// обнуляем глобальное значение якоря
localStorage.setItem('globalAnchor', '0');
// скролим
scroll(anchor);
} else {
// если мы не на странице якоря
// присваиваем глобальному якорю значение из нажатой ссылки, чтобы прехватить после перехода))
localStorage.setItem('globalAnchor', anchor);
// перенаправляем страницу
window.location.href = local;
}
});
});
// при загрузке страницы проверяем была простая перезагрузка или переход к якорю
let anchor = localStorage.getItem("globalAnchor");
if (anchor != 0 && anchor) {
// если в globalAnchor не 0, а нормальное значение якоря, то запускаем функцию
scroll(anchor);
// обнуляем глобальное значение якоря, чтобы при простой перезагрузке страницы не скролилось к якорю
localStorage.setItem('globalAnchor', '0');
}
function scroll(anchor) {
const scrollTarget = document.getElementById(anchor); // получаем блок к которому нужен скрол
const elementPosition = scrollTarget.getBoundingClientRect().top; // получаем расстояние до блока
window.scrollBy({
top: elementPosition,
behavior: 'smooth'
});
}

Комментарии

Комментарий отправлены на валидацию!

Теги: