Плавная прокрутка до якоря на jQuery - лучший скрипт

Опубликовано: 23.08.2018

видео Плавная прокрутка до якоря на jQuery - лучший скрипт

Unity3D Starter. Урок 3. Скрипты и движение объектов.

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



Пример плавной прокрутки страницы до блока комментариев:

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

Итак, если вы не знаете, что такое якорь, то для начала ознакомьтесь с этой статьей:


Базовые элементы страницы на чистом Javascript. Таймер

Из нее вы узнаете, все про якоря.

Затем, чтобы заработала прокрутка на вашем сайте должна быть подключена библиотека jQuery. Код ее подключения у меня так же в быстрых шпаргалках:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Подключать библиотеку рекомендую в head’e, то есть межу открывающимся тегом <head> и закрывающимся </head> самым первым скриптом (чтобы все остальные, использующие эту библиотеку – работали).


Учим JavaScript 33. Создаем ToDo список дел

А сам скрипт, обеспечивающий плавную прокрутку до любого якоря выглядит так:

<script type="text/javascript"> $(function(){ $("a[href^='#']").click(function(){ var _href = $(this).attr("href"); $("html, body").animate({scrollTop: $(_href).offset().top+"px"}); return false; }); }); </script>

Просто берите и пользуйтесь!

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

Похожие статьи:

Комментировать через ВКонтакте :

IRC (Internet Relay Chat)
rss