главная/jQuery, плавная прокрутка к элементу

jQuery, плавная прокрутка к элементу

Допустим, у нас есть некий элемент на странице (будь то, кнопка или ссылка) и при клике по нему мы хотим плавно прокрутить страницу вниз к другому элементу.

 

Напишем для этого функцию.


(function($){
   $(document).ready(function(){
      $('.scroll-trigger').on('click',function(){
          var self = $(this),
              element = self.data('jump-to');

          $('html, body').animate({
              scrollTop: $(element).offset().top
          }, 2000);
          return false;
      });
   });
});

Html структура:

<a href="#" class="scroll-trigger" data-jump-to="#awesome-element">
   Ссылка по которой будем кликать
</a>

<div id="awesome-element">
   Элемент к которому будем делать прокрутку
</div>