Плавная прокрутка страницы до определенного раздела (якоря)

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

 

Прежде, чем добавлять скрипт на свой сайт, предлагаю взглянуть на готовый пример.

 

Продолжаем. Ссылки и блоки создаются следующим образом. Адрес ссылки начинается с решетки, затем указывается название блока. Название блока прописывается в параметре id.

Далее мы должны подключить к нашему сайту библиотеку jQuery, иначе скрипт работать не будет. Для этого перед тегом </head> вставляем запись:

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

 

Теперь создаем файл с расширением js и вставляем туда код:

Скрипт не только выполняет плавный скроллинг до раздела, но и прячет якорь в адресной строке.

 

Что в нем можно изменить? Например, время прокрутки, оно указывается в миллисекундах. 1000 — это одна секунда. Чем ниже число, тем быстрее выполняется прокрутка.

 

Еще бывает ситуация, когда главное меню зафиксировано вверху экрана (смотрите наш пример). Тогда часть текста может попадать под меню и быть не видна. Тут мы можем сделать некоторое смещение скроллинга. В пятой строке после кода offset().top вычитаем нужное количество пикселей. Например, наше меню 80 пикселей в высоту, тогда дописываем offset().top —  80 (без px, только число).

 

Остается только подключить скрипт на странице, чтобы все заработало. После подключения библиотеки jQuery вставляем строку:

И проверяем получившийся результат.