Яндекс.Метрика

    Ни о чём

    Плавная прокрутка при переходе по якорям внутри страницы

    Проблема

    При навигации на одностраничных сайтах, организованной с помощью анкоров (a[name=target]), а также при серфинге по длинным документам с содержанием, перелинкованном на разделы станицы, наблюдается проблема удобства использования: переход происходит мгновенно, пользователь не всегда видит куда его перебросило и на чем следует сфокусировать взор. Демо.

    Внимательный читатель несомненно припомнит, что уже давно придумано до нас, например, вот тут. Однако набросанный мною за полчаса говнокод как минимум в два раза меньше по объему и не требует поиска каких-то дополнительных плагинов.
    Задача

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

    Решение

    Будем использовать мощь jQuery. Мы перехватим переходы по анкорам и плавно прокрутим страницу к цели перехода, а после этого пару раз мигнем элементом, однозначно характеризующим цель перехода (или самою целью, как будет угодно).

    При переходах извне цель просто подмигивает, необходимости крутить страницу нету. При внутренних переходах прокручиваем и подмигиваем.

    Разметка страницы (псевдокод)

    ol class="toc"
    a href="#цель1"
    a href="#цель2"
    a href="#цель3"
    /ol

    a name="цель1"
    какой-то контент
    a name="цель2"
    какой-то контент
    a name="цель3"
    какой-то контент


    Джаваскрипт (jQuery подключена по умолчанию)

        // HighLight target
        $(document).ready(function(){
        
            // Это подсветит заголовок-цель при переходе с другой страницы.
            var url = window.location;
            var anchor = url.hash; //anchor with the # character
            var anchor = url.hash.substring(1); //anchor without the # character
                    
            $('[name=' + anchor + ']').next('h2')
                .fadeOut()
                .fadeIn()
                .fadeOut()
                .fadeIn();
        
            // Это обеспечит плавную прокрутку к цели и ее подсветку.
            $('.toc a').click(function(){
                var url = this;
                var anchor = url.hash; //anchor with the # character 
                var anchor = url.hash.substring(1); //anchor without the # character

                // В Опере какие-то проблемы с определением отступа сверху, поэтому считаем его по-другому.
                // Кроме того, для нее нужно убрать селектор body.
                if (! $.browser.opera ) {
                    var targetOffset = $('a[name=' + anchor +']').offset().top;
                    $('html,body').animate({scrollTop: targetOffset}, 1500);
                } else {
                    var targetOffset = $('a[name=' + anchor +']').next('h2').offset().top;
                    $('html').animate({scrollTop: targetOffset}, 1500);
                } // if!opera
                
                // Подмигнем заголовком три раза.
                $('[name=' + anchor + ']').next('h2')
                    .fadeOut()
                    .fadeIn()
                    .fadeOut()
                    .fadeIn()
                    .fadeOut()
                    .fadeIn();
                
                //Чтобы страница не дергалась при клике.
                return false;
                
                // Здесь надо что-нибудь сделать чтобы в строке адреса не обрезался хеш.
                //window.location.replace(this.pathname + '#' + anchor);
                            
            }); // click
        }); // document ready


    * This source code was highlighted with Source Code Highlighter.


    Демо