Скроллинг по странице

В жизни каждого человека бывает такой момент, когда нам нужно реализовать на странице плавное прокручивание к нужному нам месту.

Интернет обычно выдаёт нам — назову его так — классический код скроллинга по странице, который следит за нажатиям на ссылки и вместо простого прыжка к блоку красиво к нему подкатывает. Собственно, вот он код:

$(function(){
    $("a[href^='#']").click(function(){
        var _href = $(this).attr("href");
        $("html, body").animate({scrollTop: $(_href).offset().top+"px"});
        return false;
    });
});

Сам код хорош и к автору — кто бы ты ни был, брат — вообще нет никаких претензий. Но! Есть один момент — если у нас на странице есть ещё ссылки с href=»#», то они работать не будут. Т.е., если у вас на странице уже реализованы модальные окна, которые работают на CSS — вот они работать не будут. Как и другие ссылки с заглушкой.

Поскольку данная реализация на мой вкус одна из самых простых и изящных, от неё отказываться не хочется. И у меня есть предложение — мы задействуем всю силу html5 и воспользуемся пользовательским data-атрибутом. Назовём его data-jump (был соблазн назвать его goto в честь добрых ламповых воспоминаний об уроках информатики в школе). Берём и немного дорабатываем код:

$(function(){
  $("a[data-jump^='#']").click(function(){
    var _href = $(this).attr("data-jump");
    $("html, body").animate({scrollTop: $(_href).offset().top+"px"});
    return false;
  });
});

Обратите внимание, что данный скрипт будет работать при подключенном JQuery.

Теперь поработаем над навигацией по странице. Сами ссылки, что приведут нас блоку, содержат в себе data-атрибут с именем, а самому блоку присваиваем id с таким же названием. Вот пример кода на JSFiddle.

Надеюсь, моя доработка будет полезна и пригодится.

И до встречи на Веб-Островах.