Плавная прокрутка к якорю с помощью JQuery

Плавная прокрутка к якорю с помощью JQuery
Плавная прокрутка к якорю с помощью JQuery

В этой статье мы поговорим о том как сделать плавную прокрутку к якорю на своем сайте. В последнее время в интернете очень популярными стали так называемые посадочные страницы или одностраничники (Landing Page). И каждый пытается выделиться среди других используя всякие визуальные эффекты на своем одностраничнике.

Одностраничник (Landing Page) — эта по сути обычный сайт, лишь с разницей в том что одностраничник заточен под один товар или услугу, то есть призывает купить товар либо воспользоваться какой-либо услугой.

Одним из таких визуальных эффектов является плавная прокрутка к якорю (пример: brend.salesclock.ru). Удобство такого эффекта на лицо да и приятно. Некоторые веб-мастера делают такой же эффект плавной прокрутки и на весь сайт то есть плавный скролл на сайте, это немного надоедает.

Как сделать плавную прокрутку к якорю

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

Имеем следующий код:

1 вариант:

$(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=’tuda’></a>. На самом деле принцип остается тот же. Поменяется лишь селектор нашего элемента.

2 вариант:

$(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;
    });
});

Но есть один нюанс второго метода. Если ваш одностраничник на Bootstrap, то скорее всего табы и другие элементы не будут работать. Так как табы тоже пользуются ссылками в виде href=’#collapseTwo’, поэтому лучше обратиться к элементу не через href, а через class.

2 вариант (исправленый):

$(document).ready(function(){
    $('a[class^="ac"]').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;
    });
});

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



Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.