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

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

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

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

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

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

Что такое якорь на сайте

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

  • 1

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

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

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

  • 2

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

<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>

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

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

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

Комментировать через ВКонтакте:
Отзывов к посту "Плавная прокрутка до якоря на jQuery – лучший скрипт" уже 4:
  • Вован | 22.06.2016 в 11:06

    Тох, спасибо! Но лучше сделай пример якоря, так, мне кажется, будет правильнее )

    • admin | 22.06.2016 в 16:50

      оо))
      Сделал отсылку к статье спецом, там она большая, с подробными объяснениями.
      blogsylar – уже тоже исчез?

      • Вован | 23.06.2016 в 14:56

        Продал давно уже )

  • Аркадий | 31.10.2016 в 1:28

    Скрипт отлично подошел. Другой у меня конфликтовал с библиотекой. Спасибо!

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: