Плавный скролл в Тильде

Наверняка, вы находитесь на этой странице, так как вам не нравятся резкие переходы к вашим якорным ссылкам на странице. Такие прыжки нравятся небольшому количеству людей, и точно не понравятся вашему заказчику. В этой статье мы исправим текущее положение и добавим плавности скроллу в Тильде.

Всего есть два способа добавления плавного скролла к якорным ссылкам:

1. Через стандартные модификаторы Тильды
2. Через javascript

Рассмотрим каждый способ подробнее

Плавный скролл с помощью стандартных модификаторов

На страницу в Тильде, где вы хотите добавить плавный скролл, необходимо добавить блок T178 — «Плавный скролл до локальной якорной ссылки». Он находится в Все блоки -> Другое

В настройках этого блока вы сможете:

• убрать добавление #hash к адресу страницы при переходе по якорным ссылкам;
• задать дополнительное смещение при клике на якорную ссылку. Это очень полезная функция, особенно если вы закрепили меню в верхней части экрана и при скролле меню будет «съедать» часть информации по якорю;
• задать дополнительное смещение при клике на якорную ссылку только на мобильных устройствах.

Очень важно разместить этот блок плавного скролла в самом низу страницы.

Задать плавность в этом блоке, к сожалению нельзя. Также, модификатор будет применятся абсолютно к каждой якорной ссылке на странице. Но все это можно изменить с помощью следующего способа.

Плавный скролл с помощью javascript

В этом способе вам будет необходимо применить хитрость и добавить блок HTML на страницу. Сделать это можно в разделе Все блоки -> Другое. Выберите блок HTML-код:

Зайдите в Контент блока и вставьте следующий код:

<script>
$(document).ready(function(){
  //перечисляем якоря, которые используем
  $("[href='#nazvanie-yakorya'],[href='#nazvanie-drugogo-yakorya'],[href='#nazvanie-eshe-odnogo-yakorya']").addClass("nextblock t-cover__arrow-wrapper_animated");
  
  $('.nextblock').click(function(){
    var currentLink = $.attr(this, 'href');
    currentLink = currentLink.substring(1, currentLink.length);
   
    // скорость скролла
    var speed = 2000;
    // кастомный отступ
    var customOffset = 0;
    
    var top = $('[name="'+currentLink+'"]').offset().top - customOffset;
    $('html, body').animate({scrollTop: top}, speed);
    return false;
  });
});
</script>

В этом коде вам нужно будет поменять nazvanie-yakorya на ваше название якорной ссылки. В коде так же можно поменять:

• скорость прокрутки. Для этого в поле var speed измените значение с 2000 на больше или меньше;
• дополнительное смещение при клике на якорную ссылку. Его можно изменить поле var customOffset

С помощью этого способа плавный скролл можно добавить к определенным якорям на странице в Тильде

А у вас получилось сделать плавный скролл хотя бы одним из способов?