Предлагаю сниппет для плавной прокрутки страницы к заданному месту при клике по ссылке. При отключенном javascript данный вариант тоже работоспособен, так как использует простые якоря HTML.
Тегу, к которому мы хотим произвести прокрутку, необходимо дать имя и уникальный идентификатор. Таким тегом, например может служить
:
... <body id="top" name="top"> ... </body> ...
Создаём ссылку, при нажатии на которую будет осуществлён переход к нашей метке (тегу <body>) и добавим соответствующий класс:
<a href="#top" class="scrollto">Наверх страницы ↑</a>
Теперь пишем небольшой сниппет на jQuery и наслаждаемся результатом:
jQuery(document).ready(function() {
jQuery("a.scrollto").click(function () {
elementClick = jQuery(this).attr("href")
destination = jQuery(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1100);
return false;
});
});
Допилил немного: обернул все в bind, убрал проверку анимации, заменив ее на отключение оной (метод stop)
Теперь ссылка выглядит просто:
<a href="#top">Наверх страницы ↑</a>
и соответствующий JavaScript:
$("a[href*=#]:not([href=#])").bind('click', function (event) {
var thisHash = this.hash;
var targetOffset = $(thisHash).offset().top;
$("html,body").stop().animate({
scrollTop: targetOffset
}, 1100 );
location.hash = thisHash;
event.preventDefault();
});
Реализацию данного метода вы можете наблюдать на этом блоге — прокрутите страницу вниз
Источник: https://www.kobzarev.com/jquery/jquery-snippets-smoothscroll-pages/
