Как сделать плавную прокрутку к заданному месту на странице с использованием JQuery

Разместил / Просмотров: 28 041 / комментариев 20

Здравствуйте, дорогие читатели блога. Сегодня я хочу рассказать Вам как сделать плавную прокрутку к заданным ссылкам на странице с использованием JQuery. Хочу сказать, что это очень удобная и полезная функция. Особенно если текст длинный и делится на несколько разделов.

Чтобы Вам было понятнее, посмотрите пример:

Пример

Как видно в примере, если нажать на ссылку «Services». Срабатывает автоматическая прокрутка, которая перемещает нас к заданному разделу, в данном случае это Services.

Как это работает

В принципе здесь ничего сложного нет. Коду ссылке присваивается класс, далее чтобы по нажатию на неё прокрутка переместила нас по назначению, тому месту нужно присвоить тот же класс который в коде ссылки. Только уже с помощью тегов <div>.

Затем в работу вступает скрипт JQuery (код ниже). Надеюсь, что всё понятно объяснил :-) Но всё же давайте посмотрим как это выглядит в html:

Код ссылки с уже присвоенным классом:

<a href="#services">Services</a>

html код куда нужно переместится после нажатия на ссылку:

<div id="services">
 <h2>Текст заголовка</h2>
 Контент
 </div>

Как видите, что код ссылки ссылается на класс <div id=»services»>. И вот таким образом мы перемещаемся к этому <div>у.

Теперь самое главное — это заставить страницу плавно прокручиваться к заданному месту. И делать мы это будем с помощью JQuery.

Скрипт JQuery

Сам скрипт Вы можете добавить между тегами <head> и </head>. Или же скопировать, создать текстовый документ, вставить код туда и сохранить его с разрешением .js. И потом прикрепить его Вот так:

<script src="ссылка на скрипт.js"></script>

В общем выбирать Вам. Ну а теперь вот он и сам код JQuery:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
 e.preventDefault();

var target = this.hash,
 $target = $(target);

$('html, body').stop().animate({
 'scrollTop': $target.offset().top
 }, 500, 'swing', function () {
 window.location.hash = target;
 });
 });

Важно

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

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

  • Саша, у меня не получается…
    Хочу сделать ссылку не текстовую, а картинку. Делаю сайт-одностраничник в Дримвивере. Вставила кнопку заказа-рисунок (которая должна выполнять роль ссылки), затем внутрь сформированного программой кода вставляю ссылку. Подозреваю, что косяк именно тут, скорее всего, путаница в коде.

    Код выглядит так:

    Services>

    На экран выводится картинка, а перед ней ссылка. Подскажи, где лечить?

  • Ой, по моему коду на твою статью попасть можно)))

    (открывающая скобка) p align=»justify» style=»font-size: 12pt; text-align: center;» lang=»ru-RU» xml:lang=»ru-RU»>Services>

  • Проблема решилась: пока пыталась тебе код написать, поняла где косяк))) Так что все равно — спасибо!

  • Наталия, мне кажется, что тут с картинками не получится. Потому что скрипт именно под ссылки написан.

  • Просто комментарии не правильно отображают код. Надо будет с этим разобраться :-)

  • Скоро узнаем))) Почти закончила, проверю — напишу.

  • Вот: http://audit.mactery.com
    Все работает! Спасибо, Саша!

  • Наташа, рад был помочь :-) Только плавной прокрутки почему то нет..

  • Отличный эффект. Давно искал. Спасибо.

  • Webstyler

    Добрый день!

    Спасибо за статью, но все же, чтобы она была удобной и читабельной мне кажется нужно внести пару небольших правок. Мне например, как случайно попавшему сюда пользователю показалось, что некоторые вещи вводят пользователей в заблуждение, а именно: такая фраза как «Коду ссылке присваивается класс» вводит в ступор даже опытных разработчиков, поскольку в данном примере классы вообще не фигурируют — есть только атрибут ссылки [ href=»#services» ] и идентификатор элемента [ id=»services» ].

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

    $(document).ready(function(){
    // your code here…
    });

    Вот тогда всё действительно будет работать без лишних вопросов :) Удачи :)
    И юзерам удачи, у которых всё будет исправно работать :)

  • Webstyler, извиняюсь, у меня проблема с значениями, я их никак запомнить не могу :) Спасибо Вам огромное!

  • Станислав

    Скажите как реализовать следующее — переход на страницу а затем переход к элементу с id

  • Просто даёте ссылку с идом

  • Hovo

    Добрый день! Как получить вот такой эффект — http://www.simple.com.au/services/publications/
    Очень прошу помочь!
    Спасибо

  • Здравствуйте! Подскажите п-ста как сделать что бы скролинг останавливался в отмеченном месте на странице ! Допустим есть большая страница , и когда прокручиваешь контент что бы дошло до нужного места и дальше скролинг был не возможен ! Заранее благодарен !

  • Именно чтобы не возможен даже не знаю :(

  • Вячеслав

    Спасибо тебе, добрый человек!

  • Не за что :)

  • Дмитрий Юрищев

    Вебстайлер, долго бы голову ломал, если бы не ты..!!)

    Спасибо за шпаргалку..!)

  • Andrey

    Webstyler, всё сделал как написали и всё равно не работает, в чем может быть проблема?