Меню
Спросить
???

Как сделать кнопку НАВЕРХ?

20 ноября 2017
Как сделать кнопку НАВЕРХ?

Всем привет! Сегодня покажу как сделать кнопку "наверх" с помощью JavaScript, с помощью JQuery и на чистом HTML. Для тех кто не знает, думаю таких мало, но все таки. Кнопка "наверх" - это кнопка, при нажатии на которую страница прокручивается в самый верх документа html, чтобы пользователю не крутить колесиком. Это очень удобно, особенно если ты спустился в самые подвальные места сайта. Хотя сейчас уже со временем нужда в этой кнопке на сайте отпадает, так как уже во многих браузерах есть своя такая кнопка, где эта кнопка находится я покажу на видео. Ладно, хватит болтать задними ногами, поехали!

Кнопка "наверх"

Для начала сделаем саму кнопку "наверх". Я набросал пару блоков, для имитации не короткого сайта. Сама кнопка наверх может выглядит абсолютно как угодно и находится где угодно. Она будет у меня с классом .btnUp и будет лучше если она будет иметь фиксированное позиционирование, чтобы кнопочка сопровождала пользователя всю дорогу, хотя я видел, что некоторые крепят кнопку в самом низу, по мне так не особо удобно. И так сама кнопка "наверх".

  1. <div class="btnUp">Наверх</div>

И ее стили.

  1. .btnUp{
  2.     position:fixed;
  3.     left:10px;
  4.     bottom:60px;
  5.     width:auto;
  6.     height:auto;
  7.     background:black;
  8.     font-weight:bold;
  9.     color:white;
  10.     padding:5px;
  11.     cursor:pointer
  12. }

Кнопка "наверх" на JavaScript

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

  1. display:none;

Теперь JS код. Для начала Пишем обработчик события "прокрутка" или "скролл" на документе, можно на указать обработчик на конкретный элемент.

  1. document.addEventListener('scroll', function() {

  2. });

Дальше объявим переменную sT, она будет хранить в себе значение вертикального скролла элемента, в моем случае этот элемент body.

  1. document.addEventListener('scroll', function() {
  2.     var
  3.     sT = document.body.scrollTop;
  4. });

Вторая переменная btn будет хранить в себе саму кнопку наверх, точнее обращение к ней.

  1. document.addEventListener('scroll', function() {
  2.     var
  3.     sT = document.body.scrollTop,
  4.     btn = document.querySelector('.btnUp');
  5. });

Теперь будем проверять значение скролла. Когда пользователь прокрутит страницу больше чем на 300, то будет появляться наша кнопка "наверх", в противном случае она будет исчезать.

  1. document.addEventListener('scroll', function() {
  2.     var
  3.     sT = document.body.scrollTop,
  4.     btn = document.querySelector('.btnUp');
  5.     if (sT > 300){
  6.         btn.style.cssText = 'display:block;';
  7.     }
  8.     else {
  9.         btn.style.cssText = 'display:none;';
  10.     }
  11. });

Осталось сделать само нажатие. Добавляем обработчик события на нашу кнопку.

  1. document.addEventListener('scroll', function() {
  2.     var
  3.     sT = document.body.scrollTop,
  4.     btn = document.querySelector('.btnUp');
  5.     if (sT > 300){
  6.         btn.style.cssText = 'display:block;';
  7.     }
  8.     else {
  9.         btn.style.cssText = 'display:none;';
  10.     }
  11. });
  12. document.querySelector('.btnUp').addEventListener('click', function(){

  13. });

И меняем значение вертикального скролла на ноль.

  1. document.addEventListener('scroll', function() {
  2.     var
  3.     sT = document.body.scrollTop,
  4.     btn = document.querySelector('.btnUp');
  5.     if (sT > 300){
  6.         btn.style.cssText = 'display:block;';
  7.     }
  8.     else {
  9.         btn.style.cssText = 'display:none;';
  10.     }
  11. });
  12. document.querySelector('.btnUp').addEventListener('click', function(){
  13.     document.body.scrollTop = 0;
  14. });

Вот и все. Это была кнопка "наверх" при помощи JavaScript. Если что-то не работает, то проверьте элементы с которыми вы работаете. Скролл к примеру может быть у вас не у body, а у главного divа к примеру. Поехали дальше.

Кнопка "наверх" на JQuery

На чистом JS кнопку "наверх" мы уже сделали, теперь давайте сделаем ее с использованием библиотеки JQuery. Кому-то может этот способ покажется более простым и понятным.
В принципе алгоритм тот же.
Ставим обработчик события скролла на документ.

  1. $(document).on('scroll', function(){

  2. });

Объявляем переменную для хранения значения скролла.

  1. $(document).on('scroll', function(){
  2.     var
  3.     sT = $('body').scrollTop();
  4. });

Проверяем это значение и в зависимости от него скрываем кнопку или показываем.

  1. $(document).on('scroll', function(){
  2.     var
  3.     sT = $('body').scrollTop();
  4.     if (sT > 300){
  5.         $('.btnUp').show();
  6.     }
  7.     else{
  8.         $('.btnUp').hide();
  9.     }
  10. });

Теперь самое нажатие, но с JQuery мы сделаем подъем наверх с анимацией, то есть будет плавный подъем наверх при нажатии на кнопку "наверх". Плавно можно сделать и на чистом JS, с использованием таймера или заменой класса например, но с JQuery сделать это куда проще.
Пишем обработчик нажатия на кнопку.

  1. $(document).on('scroll', function(){
  2.     var
  3.     sT = $('body').scrollTop();
  4.     if (sT > 300){
  5.         $('.btnUp').show();
  6.     }
  7.     else{
  8.         $('.btnUp').hide();
  9.     }
  10.     $('.btnUp').on('click', function(){
  11.     
  12.     });
  13. });

Ну и плавный подъем с использованием функции animate.

  1. $(document).on('scroll', function(){
  2.     var
  3.     sT = $('body').scrollTop();
  4.     if (sT > 300){
  5.         $('.btnUp').show();
  6.     }
  7.     else{
  8.         $('.btnUp').hide();
  9.     }
  10.     $('.btnUp').on('click', function(){
  11.         $('body').animate({scrollTop: 0}, 500);
  12.     });
  13. });

Это все.

Кнопка "наверх" на HTML

Можно сделать кнопку еще проще, с использованием html, но здесь не будет плавности. Можно оставить функцию для скрытия и появления кнопки, но можно и без нее, главное не забудьте в таком случае убрать display: none.
И так, чтобы сделать кнопку "наверх" на чистом HTML, достаточно использовать ссылку. Поэтому я изменю блок div на ссылку.

  1. <!--Было-->
  2. <div class="btnUp">Наверх</div>
  3. <!--Стало-->
  4. <a class="btnUp">Наверх</a>

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

  1. <a href="#" class="btnUp">Наверх</a>

Это все.

Заключение

Вот вам три способа, пользуйтесь, если еще что найду, то как обычно допишу. Ну а какой из них использовать решать конечно же только вам. Если у вас на сайте не используется JQuery и вам нужно скрытие или плавность, то конечно способ с JS, ну а если нет библиотеки, ни каких эффектов не нужно, то конечно достаточно использование ссылки. Всем спасибо, пока =)

Предыдущая статья