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

🗓️ Обновлено: 28.04.2022
💬Комментариев: 3
👁️Просмотров: 7190
web

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

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

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

  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

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

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

Статья была полезной?
👍
Да - 17
👎
Нет - 11
💬Комментарии:
Наташа

Супер! Спасибо вам огромное! За второй способ)) Стандартный через T173 T178 у меня почему-то не срабатывает 🤷‍♀️☹ Видимо, баг какой-то
Вы спасли мой сайт))))

Сергей

Здравствуйте, а как через этот код подключить несколько якорных ссылок?

Кирилл

здравствуйте. поменял код, можете добавлять несколько якорей

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучшие биржи ссылок
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Цвет 2024 года
Исследовательский институт Pantone выбрал главный цвет 2024 года. Им стал нежный бархатистый персиковый оттенок, получивший название Peach Fuzz (Персиковый пух).
#febe98