Один из самых популярных элементов на сайте, который легко реализуется при помощи библиотеки JQuery.

Описание работы.

При прокрутке страницы сайта, в нижнем правом углу появляется кнопка "наверх". При нажатии на эту кнопку, страница плавно прокручивается наверх.

HTML разметка

Блок с кнопкой нужно разместить в самом низу страницы.

<div class="scrollUp"></div>

Стили слайдера

.scrollUp{
  position:fixed;
  bottom:25px;
  right:25px;
  display:none;
  width:40px;
  height:40px;
  background:url(../images/scrollUp.png);
}
.scrollUp:hover{
  cursor:pointer;
}

Скрипт

$(function() {      
  $(window).scroll(function(){
    if ($(this).scrollTop() > 500) {
      $('.scrollUp').fadeIn();
    } else {
      $('.scrollUp').fadeOut();
    }
  });     
 
  $('.scrollUp').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 700);
    return false;
  });
});

На странице подключен данный скрипт, при нажатии на кнопку "наверх", страница плавно прокрутится вверх.

Комментарии  

0 #1 profile 30.10.2018 19:26
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать

Добавить комментарий


Защитный код
Обновить