Плавная прокрутка страницы до нужного блока на jQuery
Предположим, что на вашем сайте организованы якоря – метки на странице, по которым можно прогуливаться с помощью специального меню.
Если такую «прогулку» реализовывать на простых ссылках:
<a href="/#block">Ссылка на блок</div>
где «#block», соответственно, – это id блока, то мы получаем моментальный переход к указанному блоку.
В таких случаях пользователь не сразу поймет, что переход к блоку был выполнен. Поэтому нам нужно как-то снизить скорость прокрутки и добавить некой плавности.
Реализация следующая, на примере одного блока.
Ссылка на таргет блока:
<div class="menu">
<a href="javascript: void(0);" data-item="block">Название ссылки</a>
</div>
Где «block» – id блока. Стиль для ссылки можете задать любой, присвоив ей нужный class или id.
Сам блок:
<div id="block">Hello, World!</div>
И скрипт для плавной прокрутки (вставлять перед закрывающим тегом </body>):
<script>
$(".menu a").on("click", function() {
var get_id = $(this).attr("data-item");
var target = $("#"+get_id).offset().top;
$("html, body").animate({scrollTop: target}, 800);
});
</script>
Где «800» – скорость прокрутки в миллисекундах (можно изменить на свою).