Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый пример. Код скрипта: var t; function up() { ...
Комментарии (66)
Я как-то у себя постил то же, но для перехода куда угодно:
http://rmcreative.ru/blog/post/perekhodim-k-opredeljonnomu-dom-elementu
Ну и есть решение от Dezinerfolio:
http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html
Вариант на JS очень понравился. Всегда была делема с разной высотой страницы, в результате чего при таком варианте как у jQuery не всегда равномерно прокрутка происходила.
а как сделать, что наоборот к нужному месту плавно прокручивалось вниз?
например, если я использую якорь для перехода к нужному месту на странице…
Смотрите первый комментарий от Сэма.
Тоже делал подобную кнопку на jQuery, только я оформил код в виде плагина. Не всегда удобно прокручивать до самого конца страницы, для того, чтобы кликнуть ссылку “Наверх”. В своем плагине я сделал возможность задавать с какой части страницы отображать кнопку
А как же jQuery.ScrollTo/ ?
в варианте с jq зачем вешать на id? вдруг надо будет не одну такую ссылку, и можно просто классом
Поменять-то не проблема. В моем примере же один раз используется, а в этом случае id предпочтительнее класса.
Спасибо за решение, хоть и не ново, но всегда любил выбирать лучшее из нескольких вариантов. Оставлю себе в закладках.
Согласен с art, что на живом проекте лучше будет вариант с классом для ссылок, плюс избавиться от onclick для чистого JS. Но тут уже каждый сам себе повар, да и поменять совсем не трудно.
Я, к сожалению, без прописывания onclick у ссылки не смог сделать. В нативном JavaScript вообще плохо разбираюсь.
Кстати, для JS-варианта id вообще был не нужен, убрал его сейчас.
Странную фигню увидел я у вас 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 к ней :)
А URL не меняется, #wrapper — это всего лишь якорь…
Да якорь :)
Но URL страницы с xxx.html#zzz выглядит нелепо с любой точки зрения :)
Не обижайтесь, но кажется вам стоит сменить профессию. Правда.
Других доводов по существу вопроса нет?
тогда уж потрудитесь привести довод тому, что урл с якорем «выглядит нелепо с любой точки зрения».
Есть исследования или заключения экспертов подтверждающие, что якорь это “нелепо”?
Мы говорим об URL, а не о якоре :)
“Нелепо” это не статистика, а категория красиво-некрасиво, хорошо-плохо.
Высказал свое мнение, никому его не навязываю.
А вы не заметили в demo, что ссылка не меняется? и не должна. Якорь внутренний.
Если смотреть демо № 1, то URL при включенном скрипте и не должен меняться.
Отключите или удалите скрипт в этом примере, работать не будет, к началу страницы прокрутки не будет, так как нет метки куда возвращаться, а URL поменяется :)
Тоже самое будет при замене тега “а” на тег “span”.
Если вместо href=”#” прописать href=#wrapper” и в body добавить id=”wrapper”, как советует автор блога при отключенном скрипте, переход к началу страницы происходит, но 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пасибо большое :)) Вы мастер, во намучался же.