Многих начинающих разработчиков интересует, как организовать плавный скроллинг на одностраничном сайте. Как я неоднократно писал ранее, если есть возможность обойтись без плагина ‒ используйте её.
Теоретическую часть.
Скроллинг ‒ это прокрутка по блокам на сайте. Каждому блоку задается свой уникальный id, именуемый «якорем». Например, <div id="block1">...</div>
где между тегами div и находится ваш контент.
Практическая часть.
1. На хостинге в файле header.php перед закрывающимся тегом прописываем следующий скрипт.
Войдите, чтобы отобразить код
2. На нашей странице создаем блок с нужным id.
3. Создаем ссылку, при нажатии на которую будет происходить скроллинг к этому блоку. Допустим, это может быть ссылка в начале страницы с названием Регистрация, при нажатии на которую экран прокрутится до блока с Регистрацией, которому присвоен
id="registracia"
Код данной ссылки выглядеть будет так
Войдите, чтобы отобразить код
где
registracia
— якорь, а класс go_to заставляет ссылку действовать по сценарию нашего скрипта.
Кстати, вот пример того, как работает плавный скролл по якорю. Эта ссылка ведет на заголовок «Теоретическая часть».
2 Responses
Можно увидеть реальный пример работы этого скрипта?
Здравствуйте! По ссылке — созданный недавно лендинг, на кнопках на сайте везде идет скроллинг к блоку с контактными данными. Реализовано как раз с помощью описанного примера.