вход

Как сделать плавную прокрутку в начало страницы или в конец страницы при помощи jQuery

Как сделать плавную прокрутку в начало страницы или в конец страницы при помощи jQuery

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

Давайте разберем, где ставить эти ссылки на вашей странице.

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

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

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

HTML

Для прокрутки наверх используем такую структуру: якорь ставим в начало страницы, можно сразу после тега <body>, а саму ссылку внизу страницы ближе к тегу </body>.

...
<a name="top"></a>
...
...
...
<a href="#top">наверх</a>
...

Javascript

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

$(document).ready(function() {
   
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});

Обратите внимание на строку return false;. Она нужна для того чтобы браузер остановил действие по умолчанию, то есть прямой переход по ссылке, а использовал анимированную прокрутку. Скорость прокрутки также можно изменять, просто заменив слово slow на числовое значение.

Обратите также внимание на то, что якорь <a name="top"> </ a> все равно должен присутствовать на странице для браузеров, которые не имеют поддержки Javascript или поддерживают JQuery.

 

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

HTML

Для прокрутки вниз используем такую структуру: якорь не используем, а саму ссылку ставим в верхней части страницы ближе к тегу <body>

...
<p id="bottom"><a href="#">вниз</a></p>
...
...
...

Javascript

Здесь просто обрабатываем нажание на тег с id="bottom"

$(document).ready(function() {
   
    $('#bottom').click(function(){
        $('html, body').animate({scrollTop:$(document).height()}, 'slow');
        return false;
    });

});

Как видите, все предельно просто. Небольшая доработка страницы добавит удобство использования для посетителей.

Поддержка браузерами

Этот метод работает во всех современных браузерах. Я тестировал в ряде браузеров, включая IE6 и FF1, с использованием HTML 5 DOCTYPE.

Требования к версии JQuery

JQuery 1.2 или выше. Это работает в 1.2, 1.2.6, 1.3.2, 1.4.4, 1.5.2, 1.6.2

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
7 комментариев

Статья → Как сделать плавную прокрутку в начало страницы или в конец страницы при помощи jQuery

  1. Сергей:

    Замечательно! Спасибо огромное! Все остальные коды которые предлагают в сети – громоздкие! А тут прям всего три пять строчек и все работает! Спасибо автору! Благодарен очень!!!

  2. Сергей:

    Свой сайт пока что верстаю ещё! Так бы показал результат у себя! :)

  3. forekko:

    Хм, пилил функцию прокрутки на http://belsu.org. Прокрутка вверх плавная работает, а вниз – JS игнорирует, не плавная :) Оставил прокрутку вверх, и так сойдёт.

  4. forekko:

    В предыдущем комменте ссылкой ошибся, поправьте или удалите, пожалуйста. Спасибо :)

  5. Молодец! Согласен с Сергеем, на других сайтах смотрел коды ну очень уж длинные, а тут все коротко и просто. Спасибо!

  6. Дмитрий:

    А как сделать плавную прокрутку не до самого низа, а к определенной строке/якорю?

  7. Благодарю за подсказку! Код исправно работает и плавно докручивает страницу.

Оставить комментарий

Статья → Как сделать плавную прокрутку в начало страницы или в конец страницы при помощи jQuery

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.