0x0012 Smooth scrolling to the anchors. Плавная прокрутка к якорям 0x0011 Smooth scrolling to the anchors. Плавная прокрутка к якорям

Довольно часто мне приходится замечать одну неприятную для глаза особенность многих современных сайтов, которая кроется в том, что просмотр сайта, а точнее прокрутка страниц на нём, какой бы браузер я не использовал, далека от совершенства.

И вправду, прокрутка, как правило, весьма быстрая, либо происходит очень резко – рывками. И это я ещё не сказал о затронутой в рамках данной статьи теме – прокрутке к якорям: тут вообще в большинстве случаев просто беда (переход по якорю происходит мгновенно, что крайне некрасиво и напрягает).

Наверное, вы будете приятно удивлены, если мы скажем о том, что реализовать красивую и удобную прокрутку на сайте проще простого!

 

Не буду долго тянуть и перейду к коду плавной прокрутки:


$(document).ready(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if(target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});