Плавная прокрутка к якорям

29.10.2017

Очень часто на лендингах или просто на длинных страничках можно встретить плавную прокрутку к якорям. Такая прокрутка хорошо смотрится. Для работы скрипта требуется подключение jQuery

Разметка блока навигации имеет примерно такой вид:

<ul class="nav-block">
  <li><a href="#firstBlock">First block</a></li>
  <li><a href="#secondBlock">Second block</a></li>
  <li><a href="#thirdBlock">Third block</a></li>
  <li><a href="#fourthBlock">Fourth block</a></li>
</ul>

Для обозначения якоря будем использовать атрибут id. Например:

<a id="firstBlock"></a>

Скрипт совсем простой.

//прокрутка к якорям
$('.nav-block').on('click','a', function(e) {
    e.preventDefault();
    var id  = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').stop().animate({scrollTop: top}, 1500);
});

1500 - время прокрутки в миллисекундах

Leave a Reply

*

code