11 месяцев назад
Скрипт плавной прокрутки страницы сайта вверх на 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;
});
});
});
1,1K