Плавная прокрутка до якоря на jQuery - лучший скрипт
Опубликовано: 23.08.2018
Ранее я уже писал статью о том, что такое якорь на сайте, как его сделать и зачем он нужен. Штука это действительно очень полезная и порой необходимая. Продолжая тему якорей, теперь я всегда использую один небольшой скрипт на 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>Просто берите и пользуйтесь!
Я очень часто использую прокрутку в лендингах. Особенно она актуальна, если дизайн сайта предусматривает зафиксированное сверху меню.
Похожие статьи:
Комментировать через ВКонтакте :