Самое популярное, где может использоваться такая прокрутка, на мой взгляд, это лендинги. Там навигационное меню перенаправляет пользователя не на другую страницу, а на определенный участок на той же странице, причем по умолчанию это делается резко, а хотелось бы чтобы переход к нужной области осуществлялся плавно.
Когда-то при поиске подобного решения пришлось перелопатить не одну страницу поисковой выдачи и большинство исполнений оставляет желать лучшего. У одних код слишком громоздкий и замороченный, у других скрипт работает только с одним якорем, в то время как нам надо скроллить целое меню, где-то скрипт просто не работает и пока разберешься почему, потратишь время.
Однако, есть решение, которое полностью удовлетворило мои пожелания к скроллу по веб-странице — в нем плавная прокрутка осуществляется к любому количеству якорей при условии, что в самой ссылке он прописан через # (что важно!).
Итак, если у вас на сайте не подключена библиотека jQuery, то подключаем ее добавив в конец секции <body> следующий код:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js»></script>
В конец страницы данный скрипт добавляется чтобы исключить конфликты с другими скриптами, так он загрузится последним и все будет ОК.
Сразу после подключения добавляем сам скрипт
<script>
$(document).ready(function(){
$(«a[href*=#]»).on(«click», function(e){
var anchor = $(this);
$(‘html, body’).stop().animate({
scrollTop: $(anchor.attr(‘href’)).offset().top
}, 777);
e.preventDefault();
return false;
});
});
</script>
Теперь прокрутка готова к работе, осталось проставить анкоры на странице, это может быть текстовый или любой другой блок с идентификатором id=»your_anchor», значение идентификатора должно быть уникальным, чтобы не вызвать конфликтов.
Также нужно в меню в ссылке на нужный анкор проставить его значение вот так:
<a href=»your_anchor»>Ссылка</a>
После этого при нажатии на ссылку произойдет прокрутка к вашему якорю. На этом все!