Плавная прокрутка страницы до якоря. Пошаговая видео инструкция

Плавная прокрутка страницы до якоря

Приветствую вас читатели моего блога. Сегодня мы поговорим о таком интересном эффекта как плавная прокрутка страницы до определённого места.
В качестве ДЕМО вы можете посмотреть работу нижестоящего блока.

Что нам для этого понадобится?

Для того чтобы сделать плавной прокрутку до любого места на странице сайта нам понадобится:

  1. 1.Подключить библиотеку Jquery
  2. 2.Расставить якоря в тех местах до которых будет плавно прокручиваться страница сайта
  3. 3.Расставить ссылки, по нажатии на которые будет осуществляться плавная прокрутка.
  4. 4.Прописать специальный скрипт.
  5. 5.Проверить работу.

Как правильно подключить Jquery?

Если ваш сайт работает на каком то движке, то вполне вероятно что библиотека Jquery уже подключена и подключать её повторно не нужно.

Если подключить эту библиотеку 2 раза то она может вообще не работать.

Если же вы уверены что библиотека у вас не подключалась, то вам необходимо прописать перед тегом </head> следующую строку

Для удалённого подключения:

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

Для локального подключения вам нужно будет либо скачать файл jquery по этой ссылке Скачать Jquery

Либо перейти по адресу code.jquery.com/jquery-latest.js

И сохранить этот код в файл с расширением .js

Для этого в своём браузере нам нужно выбрать в меню «Сохранить как» и убедиться, что в поле тип файла выбран JScript.

сохранение jquery и настройка плавной прокрутки

При этом для разных браузеров сама формулировка в поле «Тип файла» может немного отличаться, но главное чтобы там присутствовало «JScript»

Затем вам нужно будет загрузить этот файл на ваш хостинг в папку «js» и при подключении библиотеки указать ссылку на него.

В моём случае это выглядит так:

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

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

Как создать якорь?

Существует два способа задать якорь:

  1. Через атрибут ID
    Например:
  2. Через атрибут name
    Например:

Я обычно использую первый вариант, хотя большой разницы в данном случае нет.

Как настроить плавную прокрутку страницы?

Для того чтобы наша плавная прокрутка до якоря сработала нам нужно расставить ссылки на якоря.

Обратите внимание, что у ссылки обязательно должен присутствовать атрибут class=»scrollto»
И она должна ссылаться на определённый якорь. В моём случае якорь имеет ID=»p1″
Поэтому в ссылке будет указано href=»#p1″. Если вы указывали якорь через name, то ссылка будет выглядеть точно так же

Теперь, когда ссылки и якоря готовы, в конце страницы перед тегом </body> подключаем скрипт:

При этом вы можете регулировать скорость анимации перехода.

скорость плавной загрузки

Прокрутка до якоря с отступом сверху

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

Прокрутка до якоря с отступом сверху

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

Какие могут быть нюансы в настройке?

Если после всех проделанных настроек у вас не работает плавная прокрутка страницы, то вам нужно сделать следующее.

  1. Проверить правильность написания заданных якорей и ссылок. Чтобы у них присутствовали все необходимые атрибуты.
  2. Попробовать подключить другую версию библиотеки Jquery.

Пошаговая видео инструкция

Если у вас остались какие то вопросы — посмотрите это видео:


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

Желаю вам благополучного создания плавной прокрутки!

До встречи в моих новых статьях.

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

8 комментариев

  1. а может подскажете как сделать отступ от якоря, а то у меня при прокрутке меню наезжает на сам якорь

    • На следующей неделе постараюсь статью по этой теме сделать. Там нужно скрипт дописать.

      • Юлия, добрый вечер! Ждем ваш обещанный скрипт. Очень нужно!

        • Здравствуйте! Добавила пункт «Прокрутка до якоря с отступом сверху» к этой же статье. Попробуйте такой вариант.

  2. Жаль, что сейчас не могу высказаться — вынужден уйти. Но освобожусь — обязательно напишу что я думаю.

    ——

  3. Юлия, доброго времени суток! Вы обещали поделится скриптом для точного скрола.

    • Здравствуйте! Добавила пункт «Прокрутка до якоря с отступом сверху» к этой же статье.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif