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

🗓️ Обновлено: 28.04.2022
💬Комментариев: 3
👁️Просмотров: 3538
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

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

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

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

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

Сергей

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

Кирилл

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

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 27364
Появление элементов при скролле
Просмотров: 23788
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 14737
Как выровнять картинку по центру с помощью CSS
Просмотров: 12966
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 10750
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Цвет 2023 года
Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
#bb2649