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

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

5256

Содержание:

Функионал работы плавной прокртуки страницы вверх на JavaScript

Функионал работы плавной прокртуки страницы вверх на JavaScript

Нередко проглядывая страницы сайта возникает необходимость прокрутки страницы в самый вверх и для удобства используют всплывающюю иконку со стрелочкой. Нажав на нее страница автоматически прокрутиться до верхнего уровня.

Что создать сайт с такой возможностью мы добавляем небольшой скрипт на jQuery, который позволит нам задать плавность перемещения от нижней части страницы к верхней.

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

Рабочий пример плавной прокрутки страницы вверх

CSS код для всплывающего изображения

@media (max-width:550px) {
#back-top{  
  position:fixed;
  width: 100%;
  height: 38px;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  background-color: rgba(0,0,0,0.7);  
}
 
#back-top a{
  width:100%;
  display:block;
  text-align:center;
}
 
#back-top span{
  width: 100%;
  height: 38px;
  display:block;
  margin: 0;
  padding: 0;
  background: url("/upload/scroll-jquery/arrow1.png") no-repeat center center;
}
}

HTML код прокртуки страницы

<span id="top"></span>
 
<div class="outer">
  <div class="middle">
    <div class="inner">
      <img src="/upload/scroll-jquery/arrow1.png" alt="">
      <img src="/upload/scroll-jquery/arrow2.png" alt="">
      <img src="/upload/scroll-jquery/arrow3.png" alt="">
      <img src="/upload/scroll-jquery/arrow4.png" alt="">
    </div>
  </div>
</div>
 
<div id="scroll-bottom"></div>
 
<p id="back-top">
  <a href="#top"><span></span></a>
</p>

Инициализация jQuery:

$(document).ready(function(){
    $(function (){    
    $("#back-top").hide();
   
    $(window).scroll(function (){
      if ($(this).scrollTop() > 500){
        $("#back-top").fadeIn();
      } else{
        $("#back-top").fadeOut();
      }
    });
     
    $("#back-top a").click(function (){
      $("body,html").animate({
        scrollTop:0
      }, 800);
      return false;
    });
  });   
});