Как сделать плавную прокрутку в начало страницы или в конец страницы при помощи 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 комментариев

  1. Иван12/04/2016
  2. Дмитрий16/10/2015
  3. forekko27/08/2012
  4. forekko27/08/2012
  5. Сергей12/08/2012
  6. Сергей12/08/2012

Добавить коментарий

два × пять =