Главная 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="#" с точки зрения поисковиков является битой ссылкой, что не приятно само по себе :)

  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 Привет! а как сделать прокурутку вниз для блога, если например комментариев полно :)

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