Главная JavaScript

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый пример. Код скрипта: var t; function up() { ...

Комментарии (66)

  1. Я как-то у себя постил то же, но для перехода куда угодно:

    rmcreative.ru/blog/post/perekhodim-k-opredeljonnomu-dom-elementu

    Ну и есть решение от Dezinerfolio:

    www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

  2. Вариант на JS очень понравился. Всегда была делема с разной высотой страницы, в результате чего при таком варианте как у jQuery не всегда равномерно прокрутка происходила.

  3. а как сделать, что наоборот к нужному месту плавно прокручивалось вниз?
    например, если я использую якорь для перехода к нужному месту на странице…

  4. Тоже делал подобную кнопку на jQuery, только я оформил код в виде плагина. Не всегда удобно прокручивать до самого конца страницы, для того, чтобы кликнуть ссылку «Наверх». В своем плагине я сделал возможность задавать с какой части страницы отображать кнопку

  5. А как же jQuery.ScrollTo/?

  6. в варианте с jq зачем вешать на id? вдруг надо будет не одну такую ссылку, и можно просто классом

  7. Спасибо за решение, хоть и не ново, но всегда любил выбирать лучшее из нескольких вариантов. Оставлю себе в закладках.

    Согласен с art, что на живом проекте лучше будет вариант с классом для ссылок, плюс избавиться от onclick для чистого JS. Но тут уже каждый сам себе повар, да и поменять совсем не трудно.

    • Я, к сожалению, без прописывания onclick у ссылки не смог сделать. В нативном JavaScript вообще плохо разбираюсь.

      Кстати, для JS-варианта id вообще был не нужен, убрал его сейчас.

  8. Странную фигню увидел я у вас prntscr.com/7aj50
    Панелька слева чуток показывается и всё.

  9. Вариант с кнопкой на верх как здесь http://studio-gost.ru/knopka-naverx-s-plavnoj-prokrutkoj/ лучше и практичнее кнопка всегда под рукой, а не только в самом низу.

  10. На мой взгляд, недостатком является использование тега «a».

    Понятно, что его наличие продиктовано работоспособностью предлагаемого при отключенном JS,
    но href="#" с точки зрения поисковиков является битой ссылкой, что не приятно само по себе :)

    • Вместо href="#" можно сделать href="#wrapper", где wrapper — самый верхний идентификатор, если, конечно же, он имеется. В этом случае все будет по правилам.

      • Можно :)
        Но лучше, вообще обойтись без тега «а», забив на отключенный JS.

        • И чем же именно такой вариант будет лучше?

          • Это, как посмотреть :)
            Самый лучший вариант — кнопка «Home» на клаве, работает всегда :)

            • Не всегда. При нажатой кнопке NumLk не работает. Приходится каждый раз отключать эту кнопку. А мне она нужна, т.к. я часто работаю с цифрами в правой панели клавиатуры.
              Я когда плагин для поднятия вверх установила и пост написала, так тоже с этими кнопками Home&End советчиков было предостаточно. У меня и на самом сайте кнопка стоит, и браузере Хром тоже поставила. Очень удобно. И ничего каждый раз переключать не надо.
              А код всяко лучше плагина, т.к. меньше нагрузка. Так что спасибо за код.

              • «NumLock» влияет только на правую панель с цифрами, теоретически он не может оказывать никакого влияния на кнопку «Home».
                Хотя в принципе возможен и такой вариант, но только если у вас урезанный вариант клавиатуры без отдельной зоны с кнопками «Ins», «Del», «Home» и прочими.

            • И всё же я не понял, чем именно лучше вариант без использования тега «a», он как минимум семантичен.

              • Комментарий № 14

                • Комментарий № 15

                  href="#wrapper"

                  — это обычная ссылка на якорь.

                  Я не издеваюсь, мне на самом деле интересно знать, почему наплевать на семантику и забить на отключенный JS лучше, чем сделать всё по-человечески, ничего при этом не потеряв.

                  • Посмотрите два примера:
                    1. webpractica.ru/i/javascript/scrolltop1.html
                    этот с JS и href="#wrapper" итого, чтобы получиь «гламур» по другому назвть полученное не могу, нужен скрипт из 8 строк плюс соответствующий код для меток-якорей.
                    2. webpractica.ru/i/javascript/scrolltop2.html
                    JS удален, имитируем работу без него, что видим?
                    Клик по «Вернуться к началу страницы» помимо возвращения туда, куда надо даписывает #wrapper в URL страницы.
                    Итак, одна страница имеет два адреса, что вряд ли понравится поисковикам :)

                    Так что лучше, мнимая семантика или респект поисковиков?

                    При отключеннм JS, посетитель может пенять только на себя, ведь понятно, что без JS многого он просто не увидит, будет лишен такой возможности.

                    Следовательно, вариант замены тега «a» на нейтральный тег «span» с моей точки зрения более правильный и простой, у вас может быть другое мнение на этот счет :)

            • На Маке нет кнопки такой, бро)

  11. Без тега

    а

    , поменял его на

    span

    , скрипт без изменений.
    webpractica.ru/i/javascript/scrolltop.html
    Понятно, что при отключенном JS не работает :)

  12. У меня в конце страницы ссылка на скрытый блок div, при клике по ссылке повесил действие — (slideDown), блок раскрывается, но при этом, чтобы его увидеть нужно прокрутить страницу вниз на высоту этого блока, вопрос — как сделать, чтобы вместе с открытием блока, страница прокручивалась бы вниз до нижней границы раскрывающегося блока?

  13. Однажды Alex Shuyskiy написал подобную штуку, а я оформил в jQuery plugin. Кому любопытно, — милости прошу: shublog.ru

  14. Спасибо! Как раз искал такой скрипт.

  15. возможно это как доп функционла для share42
    учитывая, что панель с соц иконками плавающая и заплывает вниз, возможно имеет смысл к ней добавлять такую кнопку возврата наверх, только нужно, чтобы визуально — для пользователя две панели выглядели раздельно, а объединялись только логически (кодом и версткой) — для вебмастера.

    • Такая кнопка уже есть в share42. А раздельных панелей не будет.

      • Честно говоря, без вашей подсказки я бы не определил, что в этом блоге есть кнопка такой перемотки)) Человек склонен искать привычные вещи на привычных местах и искать другой функционал в панели кнопок соцсетей для меня непривычно. Мой пример не показателен.

        Но если действительно готовы прислушиваться, запустите голосовалку типа есть ли на этом блоге прокрутка наверх с вариантами ответов
        — да есть, очень удобна
        — да есть, но еле нашел
        — нет, как ни искал

  16. Будьте любезны, как сделать прокрутку до самого низа страницы?
    JS не знаю и сам разобраться не смог.

  17. Спасибо вам огромное. Первый скрипт помог!
    Второй, бесспорно, тоже работает, но у меня толи страница коротка, толи просто браузер тупит, но все не красиво и вовсе не плавно…

  18. Оба примера отличные!!!
    Спасибо за совет!!!
    Не знал как вставить прокрутку на чистый HTML без плагинов.
    А тут и JS и JQuery помогли!!!

  19. А возможно также в скрипт (первый вариант — на JS только) добавить, чтобы когда юзер на самом верху — то кнопка не отображается — как только начал опускаться по стрпнице то она отображалась?

  20. Dimox Привет! а как сделать прокурутку вниз для блога, если например комментариев полно :)

Ваш комментарий