Скрипт плавной прокрутки страницы сайта вверх на HTML + CSS + jQuery

<span id="top"></span>

<div class="outer">
  <div class="middle">
    <div class="inner">
      <img src="img/arrow1.png" alt="">
      <img src="img/arrow2.png" alt="">
      <img src="img/arrow3.png" alt="">
      <img src="img/arrow4.png" alt="">
    </div>
  </div>
</div>

<div id="scroll-bottom"></div>

<p id="back-top">
  <a href="#top"><span></span></a>
</p>

html, body {
  height : 100%;
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #fff;
}

.outer {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  text-align: center;
  width: auto;
  padding: 0 15px;
}

img {
  padding: 20px;
}

#scroll-bottom {
  position: relative;
  height: 1500px;
}

#back-top{  
  position:fixed;
  bottom: 20px;
  right: 20px;
  padding: 0;
  margin: 0;  
}

#back-top a{
  width:64px;
  display:block;
  text-align:center;
  background-color: transparent;
  -webkit-transition:1s;
  -moz-transition:1s;
  transition:1s;
}

#back-top span{
  width:64px;
  height: 64px;
  display:block;
  margin: 0;
  padding: 0;
  background: url("img/site-arrow-1.png") no-repeat center center;
  -webkit-transition:1s;
  -moz-transition:1s;
  transition:1s;
}

#back-top a:hover span{
  background-color: rgba(0,0,0,0.1);
}

@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("img/site-arrow-2.png") no-repeat center center;
}
}

$(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;
    });
  });   
});

Отправить