adminvps

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

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

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

Комментарии (62)
  1. 1
    @

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

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

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

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

  2. 2
    Николай

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

  3. 3
    brv

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

  4. 5

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

  5. 7

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

  6. 9

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

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

  7. 11

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

  8. 13

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

  9. 14
    @

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

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

  10. 40
    @

    Без тега

    а

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

    span

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

  11. 41
    gocreg

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

  12. 42
    EGORR

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

  13. 43

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

  14. 44
    Нио

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

  15. 49
    brbt
    @

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

  16. 52
    @

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

  17. 53
    Дмитрий

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

  18. 54
    Dmitriy
    @

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

  19. 56
    @

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

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