jQuery сниппеты: плавная прокрутка страниц
Предлагаю сниппет для плавной прокрутки страницы к заданному месту при клике по ссылке. При отключенном javascript данный вариант тоже работоспособен, так как использует простые якоря HTML.
Тегу, к которому мы хотим произвести прокрутку, необходимо дать имя и уникальный идентификатор. Таким тегом, например может служить
:... <body id="top" name="top"> ... </body> ...
Создаём ссылку, при нажатии на которую будет осуществлён переход к нашей метке (тегу <body>) и добавим соответствующий класс:
<a href="#top" class="scrollto">Наверх страницы ↑</a>
Теперь пишем небольшой сниппет на jQuery и наслаждаемся результатом:
jQuery(document).ready(function() {
jQuery("a.scrollto").click(function () {
elementClick = jQuery(this).attr("href")
destination = jQuery(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1100);
return false;
});
});
Допилил немного: обернул все в bind, убрал проверку анимации, заменив ее на отключение оной (метод stop)
Теперь ссылка выглядит просто:
<a href="#top">Наверх страницы ↑</a>
и соответствующий JavaScript:
$("a[href*=#]:not([href=#])").bind('click', function (event) {
var thisHash = this.hash;
var targetOffset = $(thisHash).offset().top;
$("html,body").stop().animate({
scrollTop: targetOffset
}, 1100 );
location.hash = thisHash;
event.preventDefault();
});
Реализацию данного метода вы можете наблюдать на этом блоге — прокрутите страницу вниз
Здравствуйте. Пытался вставить Ваш скрипт, но что-то не получается… Может распишете чуть-чуть подробнее для ламера???
В чем, собственно, проблема?
ужас какой, посмотрите в опере 10.52
Какие проблемы вы видите? Скрин можно?
А зачем проверять :animated? Если по ссылке нажали, то нужно выполнить действие. Решение
$("html,body")stop().animate({ scrollTop: targetOffset}, 1100 );удачнее — http://jquerylist.ru/snippets/smooth-scrolling.html
Спасибо за наводку, подправил свою реализацию.
спасибо большое!
А не пробовали сделать автоматическое появления надписи «Наверх» при прокрутке вниз, и исчезание, когда страница снова прокручена максимум наверх? И как дела с кроссбраузерностью. Не могу найти ни один нормальный кроссбраузерный скрипт…
Делал. Вас интересует реализация?
Прокрутка работает только вверх? или вниз тоже будет работать?
И вверх и вниз.
Добрый день.
А если вместо :
написано:
сниппет изменится?
Конечно же нет. Скрипту важно лишь наличие якоря в атрибуте href
А как быть если скролл производится по внешней ссылке до якоря на странице. Например я добавил сообщение и меня перемотало на место где оно добавлено на новой странице(ссылка вида http://mypage.ru/index.php#myanchor_xx).
То есть ссылка стоит на другом ресурсе? И при клике по ней вы хотите перейти на сайт и промотать страницу?
да. сайт построен в виде форумной темы, есть форма для добавления сообщений. после добавления сообщения хочется показать пользователю его, уже добавленное, сообщение, плавно перемотав страницу к месту где оно расположено.
По сути необходимо при создании страницы скролл сделать плавным, а потом его сделать его обычным
Решил, но коряво:
scroll(0,0);//чтобы отмотать к 0,0 потому как браузер уже перепругнл на ссылку
var anch=location.href;
anch=anch.substring(anch.indexOf(‘#’)+1);
if (anch!=»){
anchDist=$(«a[name=»+anch+»]:first»).offset().top;
$(«html, body»).stop().animate({scrollTop: anchDist-150}, 1100 );
}
А как сделать плавную прокрутку вниз к якорю?
А в моем примере разве не плавная прокрутка к якорю? Или вы имеете ввиду что-то другое?
Поставить якорь внизу 🙂
А как можно спустится вниз?
Аналогично
Второй способ так и не сработал, зато первый работает на ура. Еще бы разобрать что там к чему.
Внедрил у себя. Спасибо.