Javascript, JQuery: Плавная прокрутка к якорю и не только к нему

В последнее время очень сильно популярны посадочные страницы. А еще больше популярна «фишка» в виде плавного скроллинга к якорю (думаю многие поняли о чем я говорю). Поэтому сегодня я решил рассказать как реализовать такой эффект с помощью плагина JQuery.

На самом деле скролить можно не только к якорю, но и любому другому элементу, зная его уникальный id. Рассмотрим два случая. Первый когда нам нужно скролить к элементу по его id. Имеем следующий код:

$(document).ready(function(){
    $('a[href^="#"]').click(function(){ //берем все ссылки атрибут href которых начинается с #
      if(document.getElementById($(this).attr('href').substr(1)) != null) { //на странице есть элемент с нужным нам id
         $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 500); // анимируем скролл к элементу
      }     
      return false;
    });
});

Теперь рассмотрим второй случай, когда нам нужно выполнить скрол к якорю вида <a name=»somename»></a>. На самом деле принцип остается тот же. Поменяется лишь селектор нашего элемента.

$(document).ready(function(){
    $('a[href^="#"]').click(function(){ //берем все ссылки атрибу href которых начинается с #
      var $element = $('a[name=' + $(this).attr('href').substr(1) + ']');
      if($element.length == 1) { //на странице есть только 1 элемент с указанным якорем
         $('html, body').animate({ scrollTop: $element.offset().top }, 500); // анимируем скролл к элементу
      }     
      return false;
    });
});