Главная
Веб-дизайн
Плавная прокрутка страницы

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

Как сделать кнопку прокрутки страницы вверх на jQuery? Простой и красивый способ прокрутить страницу вверх, это использовать HTML + CSS + jQuery

3 года назад

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

Нередко бывает удобно воспользоваться кнопкой прокрутки страницы вверх, когда находишься в средней или нижней части страницы. Данную возможность можно реализовать посредством HTML и CSS, однако в данном случае, пользователь будет перемещен в верхнюю часть страницы моментально (скачкообразно) и зрительно это будет выглядеть не совсем красиво. jQuery позволит нам задать плавность перемещения, избежав скачков перемещения от нижней части страницы к верхней.

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

Функионал работы плавной прокртуки страницы вверх в мобильной версии также доступен.

content.htm

<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>

style.css

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;
}
}

script.js

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

2,9K

Демо Скачать

Комментарии

ьтть5 месяцев назад
апа
Ответить