Три лучших способа сделать прокрутку вверх страницы

кот смотрит вверхЧтобы посетитель вашего веб-ресурса каждый раз, дочитав вашу интереснейшую статью до конца, не терзал колесико своей компьютерной мышки, прокручивая страницу вверх к меню, нужно для него сделать на сайте или в блоге кнопку "Вверх", которая будет прокручивать веб-страницу по нажатию. В этой статье я представляю три лучших способа реализации этой задумки.
  А именно: описание того как можно сделать кнопку "Вверх" и реализовать простую прокрутку веб-страницы только через HTML и CSS, а также лучшие решения как сделать плавный скроллинг страницы используя jQuery. И конечно, инструкция как это применить.
 Итак, начнем с простого.

Кнопка и прокрутка страницы вверх через HTML и CSS.

  Тут все очень просто - реализуется такая кнопка по средствам, так называемого "якоря". Действия следующие:
  Вверху страницы, в коде сразу после <body> или в блоке с меню, в общем в том месте до которого нужно прокрутить страницу, устанавливаем следующую конструкцию:
<div><a id='top'/></div>
 Где id - идентификатор ссылки.
 Теперь нужно разместить саму ссылку-кнопку при нажатии на которую будет происходить прокрутка страницы к якорю. Её конструкцию можно расположить в любом удобном месте, т.к. положение кнопки определяется через CSS. Код такой:
<div><a href="#top" class="idTop">ВВЕРХ</a></div>
 А чтобы придать это конструкции вид кнопки добавим CSS, он будет примерно такой:
a.idTop {
 position: fixed; /*позиционирование кнопки фиксированное*/
 z-index: 9999; /*отображаем поверх всех элементов*/
 bottom: 0%; /*положение снизу*/
 right: 0%; /*положение справа*/
 background: #7db9e8; /*фон, можно указать любую картинку*/
 opacity: .6; /*прозрачность*/
 color: #fff; /*цвет текста*/
 padding: 10px; /*внутренние отступы*/
 margin: 5px 15px 15px 5px; /*внешние отступы*/
}
a.idTop:hover {
 opacity: 1;
}
 Или можно использовать готовое изображение кнопки в виде стрелки вверх или еще чего, это уже кому как. Тогда код для кнопки будет таким:
<div><a href="#top" class="idTop"><img src='.../myimage.png'/>
</a></div>
 Минус такого подхода к реализации кнопки "Вверх" в том, что она будет видна, и вверху страницы тоже. Ну а плюсы что на неё не влияет включена ли поддержка JavaScript в браузере пользователя, для реализации такой кнопочки не нужно устанавливать ни плагинов, ни скриптов на сайт, которые поедают время и скорость его загрузки.

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

Данный вариант не сильно отличается от предыдущего примера на HTML, но он призван упростить две вещи в реализации быстрого скроллинга - избавить от размещения якоря и сделать прокрутку страницы более плавной. Путь внедрения такой:
- Подключаем любую версию jQuery, лучше конечно последнюю.
- Затем добавляем на сайт скрипт представленный ниже:
$(function() {
    $('.backtotop').click(function(){
       $('html, body').animate({scrollTop:0}, 'slow');
   });
});
- Размещаем в шаблоне блок с селектором .backtotop - блок, ссылку, кнопку.
- Задаем для него желаемый вид через CSS. Можно из предыдущего примера, только здесь, для примера, сделаем вариант с изображением:
a.idTop {
 position: fixed;
 z-index: 9999;
 bottom: 0%;
 right: 0%;
 background: url('.../yuor_image_64x64.jpg') no-repeat;
 height: 64px;
 width: 64px;
 opacity: .6;
 color: transparent;
 padding: 10px;
 margin: 5px 15px 15px 5px;
}
a.idTop:hover {
 opacity: 1;
}
 Плюсы - легкость скрипта, красота работы, минусы - маленький функционал, а практически его и нет-то. Ведь не всегда требуется прокрутить страницу сайта только вверх, иногда хочется предоставить пользователю возможность вернуться к месту клика по кнопке или к самому низу страницы.

 Но самым жизнеспособным и несомненно лучшим выполнением данной задачи, стал jQuery плагин (очень небольшой скрипт), предложенный by Craig Wilson, Ph.Creative еще в далеком 2009 году, который во всю используется и рекламируется по сей день. Представляю его вашему вниманию.

  jQuery плагин прокрутки веб-страницы вверх

 Вообще, по большому счету, прям-таки плагином этот скрип назвать как-то не особо и получается из-за его совершенно небольшого размера. Но при этом, он обладает всеми необходимым функционалом. Этот скрипт:
 - плавно прокручивает страницу вверх;
 - кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху;
 - имеет маленький размер и работает во всех браузерах.

Итак, HTML код для кнопки:
<a href="#" id="toTop"></a>
Размещаем в любом подходящем месте шаблона, в Blogger это можно сделать в гаджете HTML/JavaScript.
Далее добавляем CSS
Кнопка с текстом:
#toTop {
 position:fixed;
 z-index:9999;
 bottom:10px;
 right:10px;
 background: #F4FFBF;
 border: 1px solid #ccc;
 padding: 5px;
 cursor: pointer;
 color: #666;
 text-decoration: none;
 width:100px;
}
Кнопка - изображение:
#toTop {
 position:fixed;
 z-index:9999;
 bottom:10px;
 right:10px;
 background: url('.../yuor_image_64x64.png') no-repeat;
 width: 64px;
 height: 64px;
 border: none;
 padding: 5px;
 cursor: pointer;
 color: transparent;
 text-decoration: none;
}
И собственно, размещаем сам jQuery плагин, как обычно, до закрывающего </head>
$(function(){
  $.fn.scrollToTop=function(){
    $(this).hide().removeAttr("href");
    if($(window).scrollTop()!="0"){
        $(this).fadeIn("slow")
  }
  var scrollDiv=$(this);
  $(window).scroll(function(){
    if($(window).scrollTop()=="0"){
    $(scrollDiv).fadeOut("slow")
    }else{
    $(scrollDiv).fadeIn("slow")
  }
  });
    $(this).click(function(){
      $("html, body").animate({scrollTop:0},"slow")
    })
  }
});
$(function() {$("#toTop").scrollToTop();});

Вот такие три простых решения для того чтобы сделать красивую и удобную кнопку прокрутки страницы.

©http://magentawave.com

29 комментариев:

  1. Спасибо большое за полезный материал! Давно хотела установить нечто подобное в свой Blogger.

    ОтветитьУдалить
  2. Конечно же у каждого свой вкус. А я противник установки лишних скриптов на странице блога.

    Я устанавливал подобную кнопку на свой блог, а через неделю от нее отказался.

    Зачем она нужна? Ведь на клавиатуре есть кнопки "Home" - вверх страницы, "End" - вниз, "Page Up" и "Page Down" - прокрутка экрана вверх или вниз. А кнопка, установленная на странице, лишь увеличивает время ее загрузки.

    Это мое личное мнение, хотя, в этом вопросе я не одинок.

    Удачи!

    ОтветитьУдалить
    Ответы
    1. Ваше мнение конечно интересно, за мануал по клавиатуре отдельное спасибо :), но позволю с ним не согласится.

      Вопрос не в том чтобы просто прокрутить страницу и сделать это быстро, но еще и красиво. Смысл в кнопках клавы, если есть мышь и колесико? Да и не думаю что все помнят об этих кнопках, а многие даже не знают зачем они нужны, а так - увидели, кликнули и поехали.

      Что касается загрузки и скриптов, то хочу заметить, что есть вариант на HTML, который по своей сути просто визуализирует кнопку клавиатуры "Home".

      Ну а последний плагин весить в сжатом виде (без переносов и лишних пробелов) всего имеет размер 420 байт > 1Кбайта и на сколько же может такой скрипт замедлить загрузку вашего блога? А если еще и не использовать изображений для оформления, сделать все только через CSS (как это сделано здесь), то любая картинка весом в 2Кбт на больше замедлит скорость загрузки блога.

      Но в любом случаи спасибо за ваше мнение и полезное информационное дополнение.

      Удалить
    2. Я тоже не пользуюсь данной кнопкой, но считаю, что на страничках с большим объёмам информации (салфетках с множеством комментариев) она не будет лишней и даже наоборот - будет весьма востребована посетителями.

      PS. Вполне можно поставить на какой-нибудь проект.

      Удалить
  3. Думаю,что те,ком нужна такая кнопка,с удовольствием воспользуются информацией ,изложенной здесь.
    К сожалению,я ещё до этого не доросла.Но,с удовольствием прочла и теперь знаю,куда мне заглянуть в случае чего...:)

    ОтветитьУдалить
  4. Денис19.02.13, 21:58

    А у меня что-то не работает 3-й вариант нормально, ничего не исчезает и не появляется - висит постоянно и баста ))

    ОтветитьУдалить
    Ответы
    1. К сайту должна быть подключена библиотека jQuery для работы jQuery-плагина :)

      Удалить
    2. Анонимный11.09.13, 3:25

      А где взять эту библиотеку?
      Поделитесь...

      Удалить
    3. Ознакомьтесь с этой статьей http://www.magentawave.com/2013/03/jquery.html

      Удалить
  5. Как сделать, чтобы кнопка появлялась после прокрутки страницы, процентов на 10.
    Вот код: http://notepad.cc/kod-detsle

    ОтветитьУдалить
    Ответы
    1. Это "чистый" JavaScript, в котором я пока не силен :( Я даже не знаю возможно ли на нем такое сделать вообще, обратись к автору,

      Удалить
  6. Анонимный15.06.13, 11:11

    а какой скрипт Вы использовали для реализации кнопок вверх-вниз на своём сайте?

    ОтветитьУдалить
    Ответы
    1. Аналог описан здесь - http://www.magentawave.com/2013/01/scroll-page-up-and-down.html

      Удалить
  7. Здравствуйте, я правильно поняла, что надо скопировать подряд три кода: код кнопки, потом CSS, потом плагин, и всё это дело вставляем подряд над (тэг в комментарий не вставился)? И как подключить библиотеку jQuery для работы jQuery-плагина?

    ОтветитьУдалить
    Ответы
    1. Как подключить jQuery читаем здесь - http://www.magentawave.com/2013/03/jquery.html
      Коды вы копируете в те места шаблона где им место: CSS - к стилям, HTML - в код где думаете расположить кнопку и скрипт до закрывающего тега <head>. Но если речь о Blogger, то можно все разместить в гаджете HTML/JavaScript

      Удалить
  8. Анонимный07.12.13, 21:48

    кнопка наверх очень нужна, особенно на мобильных устройствах. Жаль третий вариант не отображается на смртфоне нокия

    ОтветитьУдалить
  9. Анонимный25.04.14, 23:53

    Ктобы что не говорил, а кнопки эти нужны - особенно если сайт "заточен" под мобильные устройства - там уже нет клавы/мыши... ;)

    ОтветитьУдалить
  10. Анонимный21.05.14, 12:40

    Как сделать что бы сайт прокручивался от определенной высоты? Например сортировка по буквам. Нажимаешь на букву "Е" сайт прокручивается вниз до буквы Е.

    ОтветитьУдалить
    Ответы
    1. Используйте самый простой способ - якоря. Если нужны дополнительные функции, типа плавной прокрутки или подсветки , то это нужно писать новый скрипт под ваши нужды.

      Удалить
  11. Iakoriami polzuius davno.
    Udobno i praktichno dlia navigacii.
    Dlia interesa postavil " variant 3"
    Klassno,
    No iakoria kak-to blije k telu i poproshe.

    ОтветитьУдалить
  12. Анонимный18.06.14, 6:39

    Огромное спасибо. Очень познавательная статья!!!

    ОтветитьУдалить
  13. Анонимный02.01.15, 20:00

    Отличная статья спасибо

    ОтветитьУдалить
  14. Анонимный05.03.15, 21:11

    спасибо, помогло

    ОтветитьУдалить
  15. Анонимный06.05.15, 14:44

    Большое спасибо!!!

    очень помогло

    ОтветитьУдалить
  16. Анонимный12.02.16, 17:02

    и мало что понятно почему просто не отдать готовый скрипт?

    ОтветитьУдалить
    Ответы
    1. В статье их три, готовых, а вот тут есть еще варианты кнопок прокрутки:
      http://www.magentawave.com/2013/01/scroll-page-up-and-down.html
      http://www.magentawave.com/2015/11/scroll-page-up-and-return.html

      Удалить
  17. Хорошо бы, чтобы автор ещё давал посмотреть демо, а то нужно сначала установить, чтобы увидеть.

    Ещё вопрос: можно ли сделать плавную прокрутку только на CSS3 без яваскрипт? Спасибо.

    ОтветитьУдалить
    Ответы
    1. Здесь с демо как-то не срослось, но хорошие примеры есть еще тут
      http://www.magentawave.com/2015/11/scroll-page-up-and-return.html
      http://www.magentawave.com/2013/01/scroll-page-up-and-down.html

      На CSS можно, в ближайшее время добавлю пример в этот пост

      Удалить

Следующее Предыдущее

BestProject