Web Scripts

Как сделать автоскролл к элементу

• 14-12-2017 •

Иногда нужно сделать так, чтобы при нажатии на кнопку или на ссылку, был плавный скролл к определенному элементу на сайте или как в примере, к заголовку. А что если таких элементов на сайте много? Можно обойтись коротеньким скриптом, который я сейчас опишу

Автоскролл к элементу

See the Pen Scroll to element on click by Aleksandrs (@CoolS2) on CodePen.0

HTML

Для начало создадим основной блок, в котором будет большой заголовок, кнопка, текст и потом заголовок поменьше, к которому и будет наш автоскролл.


<div class="content">
      <h1>Long block</h1>
      <button>To next title</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor consectetur vestibulum. Curabitur interdum tincidunt metus id ullamcorper. Maecenas eleifend vel augue non posuere. Suspendisse bibendum porta tincidunt. Mauris pellentesque libero ac sollicitudin blandit. In tortor erat, tristique sed laoreet id, dapibus ac massa. Cras viverra odio nisl, nec placerat urna sollicitudin at. Vivamus ac nisi non purus pharetra congue vel nec urna. Nullam eu porta enim. Fusce venenatis id purus sit amet interdum. Duis neque libero, bibendum non erat id, tristique viverra magna. In hac habitasse platea dictumst. Curabitur eleifend sollicitudin mauris, quis feugiat augue sagittis non.</p>
<h3>Title block</h3>
    </div>

CSS

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


.content{
  max-width: 500px;
  margin: 0 auto;
}

JQuery

А тут самое интересное! Создаем новый триггер для jquery, который назовем 


.autoscroll()

В параметр функции пропишем переменную (селектор) к которому и будет скролл. В самой функции находим значение top нашего селектора 


$(this).offset().top

говорим, что это будет анимация для блоков html, body 


$('html, body').animate

задаем скорость скролла 500 и задаем сам скролл к значению, которое мы взяли с нашего селектора 


scrollTop: $(this).offset().top

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


  jQuery.fn.autoscroll = function(selector) {
    $('html, body').animate({
      scrollTop: $(this).offset().top
    }, 500);
}
  
  $('button').on('click', function(){
    $('.content h3').autoscroll();
  });

Предположим что у вас на сайте не нужно использовать много раз один и тот же триггер, то можно воспользоваться скриптом вот так:


$('button').on('click', function(){
    $('html, body').animate({
      scrollTop: $('.content h3').offset().top
    }, 500);
  });

Вот и все дела! Если остались вопросы, задавайте в комментариях! Так же можете почитать Как подключить SCSS

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