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

Проблема

При навигации на одностраничных сайтах, организованной с помощью анкоров (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.

Демо