Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе.
Вариант на JavaScript
Можно посмотреть готовый пример.
Код скрипта:
var t;
function up() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top > 0) {
window.scrollBy(0,-100);
t = setTimeout('up()',20);
} else clearTimeout(t);
return false;
}
Число -100 – это количество пикселей, которое прокручивается вверх через каждые 0,02 секунды (число 20).
В подходящее место html-кода страницы необходимо добавить такую ссылку:
<a href="#" onclick="return up()">наверх</a>Вариант на jQuery
Можно посмотреть готовый пример.
Код скрипта:
(function($) {
$(function() {
$('#up').click(function() {
$('html, body').animate({scrollTop: 0},500);
return false;
})
})
})(jQuery)
Число 500 – это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.
В подходящее место html-кода страницы необходимо добавить такую ссылку:
<a href="#" id="up">наверх</a>В случае, если в браузере отключен JavaScript, при клике на данную ссылку страница также прокрутится наверх, но только уже не плавно.
Комментарии (66)
Странную фигню увидел я у вас http://prntscr.com/7aj50
Панелька слева чуток показывается и всё.
Спасибо, исправил.
Вариант с кнопкой на верх как здесь http://studio-gost.ru/knopka-naverx-s-plavnoj-prokrutkoj/ лучше и практичнее кнопка всегда под рукой, а не только в самом низу.
На мой взгляд, недостатком является использование тега «a».
Понятно, что его наличие продиктовано работоспособностью предлагаемого при отключенном JS,
но href=”#” с точки зрения поисковиков является битой ссылкой, что не приятно само по себе :)
Вместо
href="#"можно сделатьhref="#wrapper", гдеwrapper– самый верхний идентификатор, если, конечно же, он имеется. В этом случае все будет по правилам.Можно :)
Но лучше, вообще обойтись без тега “а”, забив на отключенный JS.
И чем же именно такой вариант будет лучше?
Это, как посмотреть :)
Самый лучший вариант – кнопка “Home” на клаве, работает всегда :)
Не всегда. При нажатой кнопке NumLk не работает. Приходится каждый раз отключать эту кнопку. А мне она нужна, т.к. я часто работаю с цифрами в правой панели клавиатуры.
Я когда плагин для поднятия вверх установила и пост написала, так тоже с этими кнопками Home&End советчиков было предостаточно. У меня и на самом сайте кнопка стоит, и браузере Хром тоже поставила. Очень удобно. И ничего каждый раз переключать не надо.
А код всяко лучше плагина, т.к. меньше нагрузка. Так что спасибо за код.
«NumLock» влияет только на правую панель с цифрами, теоретически он не может оказывать никакого влияния на кнопку «Home».
Хотя в принципе возможен и такой вариант, но только если у вас урезанный вариант клавиатуры без отдельной зоны с кнопками «Ins», «Del», «Home» и прочими.
И всё же я не понял, чем именно лучше вариант без использования тега «a», он как минимум семантичен.
Комментарий № 14
Комментарий №15
href=”#wrapper”— это обычная ссылка на якорь.
Я не издеваюсь, мне на самом деле интересно знать, почему наплевать на семантику и забить на отключенный JS лучше, чем сделать всё по-человечески, ничего при этом не потеряв.
Посмотрите два примера:
1. http://webpractica.ru/i/javascript/scrolltop1.html
этот с JS и href=”#wrapper” итого, чтобы получиь “гламур” по другому назвть полученное не могу, нужен скрипт из 8 строк плюс соответствующий код для меток-якорей.
2. http://webpractica.ru/i/javascript/scrolltop2.html
JS удален, имитируем работу без него, что видим?
Клик по “Вернуться к началу страницы” помимо возвращения туда, куда надо даписывает #wrapper в URL страницы.
Итак, одна страница имеет два адреса, что вряд ли понравится поисковикам :)
Так что лучше, мнимая семантика или респект поисковиков?
При отключеннм JS, посетитель может пенять только на себя, ведь понятно, что без JS многого он просто не увидит, будет лишен такой возможности.
Следовательно, вариант замены тега “a” на нейтральный тег “span” с моей точки зрения более правильный и простой, у вас может быть другое мнение на этот счет :)
Глупый спор. Лучше будет тот вариант, которые наиболее удобен владельцу сайта.
Варианты, варианты …
В этом, что-то есть :)
соешники такие сеошники
от того что кто-то нажал на якорь и урл обновился, поисковику ни холодно ни жарко
даже если кто-то скормит поисковику ссылку с якорем, вряд ли современные поисковики не догадаются, что это одна и та же страница.
может на заре seo это и имело значение, но сейчас вряд ли
если рассмотреть другие случаи применения якорей, типа прокрутить страницу сразу на нужное место (не только вверх), как вы сможете это повторить без якоря в адресе?
Для посетителя и поисковика, все должно быть однозначно,
одна страница и один URL к ней :)
Спасибо, вашу точку зрения понял.
На Маке нет кнопки такой, бро)
Без тега
, поменял его на
, скрипт без изменений.
http://webpractica.ru/i/javascript/scrolltop.html
Понятно, что при отключенном JS не работает :)
У меня в конце страницы ссылка на скрытый блок div, при клике по ссылке повесил действие – (slideDown), блок раскрывается, но при этом, чтобы его увидеть нужно прокрутить страницу вниз на высоту этого блока , вопрос – как сделать, чтобы вместе с открытием блока, страница прокручивалась бы вниз до нижней границы раскрывающегося блока?
Однажды Alex Shuyskiy написал подобную штуку а я оформил в jQuery plugin. Кому любопытно, – милости прошу: shublog.ru
Спасибо! Как раз искал такой скрипт.
возможно это как доп функционла для share42
учитывая, что панель с соц иконками плавающая и заплывает вниз, возможно имеет смысл к ней добавлять такую кнопку возврата наверх, только нужно, чтобы визуально – для пользователя две панели выглядели раздельно, а объединялись только логически (кодом и версткой) – для вебмастера.
Такая кнопка уже есть в share42. А раздельных панелей не будет.
Честно говоря, без вашей подсказки я бы не определил, что в этом блоге есть кнопка такой перемотки)) Человек склонен искать привычные вещи на привычных местах и искать другой функционал в панели кнопок соцсетей для меня непривычно. Мой пример не показателен.
Но если действительно готовы прислушиваться, запустите голосовалку типа есть ли на этом блоге прокрутка наверх с вариантами ответов
– да есть, очень удобна
– да есть, но еле нашел
– нет, как ни искал
Согласен. Она там совсем не к месту.
Я думал скрипт не пашет. Ждал пока сбоку кнопка появиться ))))
Будьте любезны, как сделать прокрутку до самого низа страницы?
JS не знаю и сам разобраться не смог.
Вот пример – http://jsfiddle.net/Dimox/XqsrS/
Благодарю!
Спасибо вам огромное. Первый скрипт помог!
Второй, бесспорно, тоже работает, но у меня толи страница коротка, толи просто браузер тупит, но все не красиво и вовсе не плавно…
Оба примера отличные!!!
Спасибо за совет!!!
Не знал как вставить прокрутку на чистый HTML без плагинов.
А тут и JS и JQuery помогли!!!
А возможно также в скрипт (первый вариант – на JS только) добавить, чтобы когда юзер на самом верху – то кнопка не отображается – как только начал опускаться по стрпнице то она отображалась?
Скорее всего, можно, но я не знаю, как.
Dimox Привет! а как сделать прокурутку вниз для блога,если например комментариев полно :)
В скрипте на jQuery поменяй строку:
на такую:
Cпасибо большое :)) Вы мастер, во намучался же.
Так намного лучше – при приближении к вершине документа скроллинг замедляется.
Спасибо, заврианто на JS забрал в свой фреймворк! Пиши еще на JS … Нафиг тебе эта рыбалка? :D
Я не парился и прикрутил все на чистом HTML. Правда все время висит)))
Прокрутка сверху вниз:
var t;
function up() {
if((window.innerHeight + window.pageYOffset) < document.documentElement.scrollHeight) { window.scrollBy(0,1); t = setTimeout('up()',20);} else clearTimeout(t); return false;
Брат а как сделать чтобы скролл вниз был и быстро?
А как сделать скрол, который при первом нажатии на ссылку поднимался бы вверх, а при втором нажатии опускался бы вниз и так постоянно, раз вверх, раз в них?
Вариант jQuery норм работает, спасибо!
Спасибо огромнейшее!!! У меня просто нет слов благодарности.