Как сделать плавный скролл в тильде

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Якоря и ссылки внутри страницы

Поставить ссылку, которая ведет внутрь страницы к конкретному блоку (разделу), можно двумя способами:

1. Добавьте в нужное место специальный блок — T173 Якорная ссылка из категории Другое. В Контенте T173 пропишите желаемое название для якоря, например: «contacts». И можно теперь переходить к этому месту, в котором находится блок T173, указывая ссылку вида «#contacts» на кнопках или в меню. Сам блок невидимый.

2. Поставить ссылку на любой блок: Для этого вам нужно в адресе ссылки прописать «#rec129000». Этот уникальный номер есть у каждого блока. Его можно найти в контекстной панели Settings блока (в самом низу). Обратите внимание, что если вы скопируете страницу, то номера блоков поменяются и вам нужно будет поставить ссылки заново.

Чтобы по ссылке посетитель сайта переходил к конкретному месту на другой странице, поставьте ссылку вида: /pagename#anchorname , где pagename — это адрес страницы, на которую нужно перейти, а anchorname — название якоря, который обозначает место, куда должен быть отправлен посетитель.

Если вы хотите, чтобы переход к назначенному блоку был плавным, «скользящим», добавьте на страницу блок T178 (Библиотека блоков → Другое → Плавный скролл до локальной ссылки).

Обращаем внимание, что на странице достаточно одного такого модификатора — использование нескольких на одной странице может привести к ошибкам.

Как сделать плавный скролл на Тильда?

Этот скрипт позволит тебе сделать эффект плавного скролла на всей странице на Тильда. Пример работы модификации внизу cтраницы

JavaScript

Обновление от 31.12.23 — В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки «#rec», поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

1. Просто добавь блок на станицу и выбери нужные тебе настройки в генераторе

2. Если нужно сделать бесконечный скролл страницы то обязательно задублируй первый экран в низ страницы, потому что с технической точки зрения, скролл в режиме бесконечности перемещает положение с самого нижнего на самое верхнее

Инструкция

— Обрати внимание что параметры нужно указывать прямо как написано для ориентира полупрозрачным. Именно в таком формате ожидает ввода генератор