Кнопка вверх для сайта


Иногда, когда на странице контента слишком много, и при скролле вниз, надо вернутся обратно в шапку сайта, а самому листать вверх лень, можно реализовать кнопку «Вверх» на jQuery.

Для начала в конце страницы, перед закрытием тега «</body>» поставим враппер нашей кнопки.

<div class="sab-up"></div> <!-- Класс можете использовать любой, или делать через id. Главное что на селектор будут вешаться события и стили -->

Далее, надо написать сам скрипт на появление/скрытие кнопки при скролинге и само событие скролинга вверх. Делаем мы это через jQuery, для этого должна быть подключена библиотека.

$(document).ready(function(){
	$(window).scroll(function(){ // Событие срабатывающее при скролинге.
		if($(window).scrollTop()>=300){ // Если мы опустили страницу на 300px, то показываем кнопку, если нет, то скрываем.
			$('.sab-up').addClass('active');
		}else{
			$('.sab-up').removeClass('active');
		}
    });
    if($(window).scrollTop()>=300){ // Если открываем страницу, и она уже проскролена на 300px, то показываем кнопку, если нет, то скрываем.
		$('.sab-up').addClass('active');
	}else{
		$('.sab-up').removeClass('active');
	}
    $('.sab-up').click(function () { // Событие при клике на кнопку "вверх".
		$('html, body').animate({scrollTop:0}, 800); // Скролим страницу кверху            
    });
});

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

.sab-up{
   position: fixed;
   bottom: 30px;
   right: -50px;
   width: 40px;
   height: 40px;
   content: '';
   box-sizing: border-box;
   cursor: pointer;
   display: block;
   z-index: 99;
   border-radius: 10px;
   background: #ffd800;
   border-bottom: 4px solid #998200;
   -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
   transition: all 0.5s;
   opacity: 0;
}
   .sab-up:hover{
      background: #ffba00;
   }
   .sab-up.active{
      right: 30px;
      opacity: 1;
   }
   .sab-up:before{
      position: absolute;
      width: 14px;
      height: 14px;
      box-sizing: border-box;
      display: block;
      content: '';
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      top: 50%;
      left: 50%;
      margin-top: -3px;
      margin-left: -7px;
      transform: rotate(-45deg);
   }

Для связи

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

Или написать прямо на почту info@bobreod.ru





Отправляя форму, вы соглашаетесь с нашей политикой конфиденциальности