Самое популярное, где может использоваться такая прокрутка, на мой взгляд, это лендинги. Там навигационное меню перенаправляет пользователя не на другую страницу, а на определенный участок на той же странице, причем по умолчанию это делается резко, а хотелось бы чтобы переход к нужной области осуществлялся плавно.
Когда-то при поиске подобного решения пришлось перелопатить не одну страницу поисковой выдачи и большинство исполнений оставляет желать лучшего. У одних код слишком громоздкий и замороченный, у других скрипт работает только с одним якорем, в то время как нам надо скроллить целое меню, где-то скрипт просто не работает и пока разберешься почему, потратишь время.
Однако, есть решение, которое полностью удовлетворило мои пожелания к скроллу по веб-странице — в нем плавная прокрутка осуществляется к любому количеству якорей при условии, что в самой ссылке он прописан через # (что важно!).
Итак, если у вас на сайте не подключена библиотека 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>После этого при нажатии на ссылку произойдет прокрутка к вашему якорю. На этом все!