大话滚动条回到顶部(Back to top)
标签(空格分隔): javascript
概述
在实际过程中,当页面内容过过多时,需要用到回到顶部的功能。即当页面滚到到一定程度时,出现回到顶部的按钮,点击回到顶部的按钮,滚动条重新回到顶部。
具体需要注意以下两点:
- 控制回到顶部按钮的出现和隐藏;
- 点击回到顶部按钮页面如何处理。
基于这两点事情就好办了,首先新增一个按钮回到顶部,默认为隐藏的,html&css代码如下:
<a href="javascript:void(0);" class="back-top" style="display: none;">
<img src='data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAABWCAYAAABVVmH3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1
Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0
YW5jZUlEPSJ4bXAuaWlkOkE4NTUxMUVFNDJBOTExRTZBNUE5QjlFMzk0RDRFRTE1IiB4bXBNTTpE
b2N1bWVudElEPSJ4bXAuZGlkOkE4NTUxMUVGNDJBOTExRTZBNUE5QjlFMzk0RDRFRTE1Ij4gPHht
cE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTg1NTExRUM0MkE5MTFF
NkE1QTlCOUUzOTRENEVFMTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTg1NTExRUQ0MkE5
MTFFNkE1QTlCOUUzOTRENEVFMTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94
OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5nE9xgAAAKd0lEQVR42uyde0xU2R3H79x5ADMw
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
'/>
</a>
.back-top {
display: none;
position: fixed;
width: 43px;
height: 43px;
background-size: 43px 43px;
right: 20px;
bottom: 30px;
z-index: 1;
}
.back-top img{
height: 100%;
width: 100%;
}
- 控制该元素何时显示
function getScrollY(){
var scrollTop=0;
if(window.scrollY > 0){
scrollTop = window.scrollY;
}
if(document.documentElement && document.documentElement.scrollTop){
scrollTop= document.documentElement.scrollTop;
}
else if(document.body) {
scrollTop= document.body.scrollTop;
}
return scrollTop;
}
var elTop = document.querySelector(".back-top");
window.addEventListener("scroll", function(){
var top = getScrollY();
if(top > 100){
elTop && (elTop.style.display = "block") ;
}
else{
elTop && (elTop.style.display = "none");
}
}, false);
- 点击回到顶部按钮
elTop.addEventListener("click", function(e){
window.scrollTo(0, 0);
e.preventDefault && e.preventDefault();
}, false);
完事,搞定!!就是这么简单:)
但是,有痛点,点击回到顶部没有动画效果,体验太差。好嘛,那我们加动画。
经过一番苦战,修改js代码如下:
// 顶部添加计时器
var backToTopTimer = null;
elTop.addEventListener("click", function(){
var totalTop = getScrollY(); // 获取总共滚动的距离。
var step = 100, leftY = totalTop; // 每个定时器期间移动距离,以及剩余距离
if(backToTopTimer){
clearInterval(backToTopTimer);
backToTopTimer = null;
}
backToTopTimer = setInterval(function(){
leftY -= step;
if(leftY <= 0){
// 关闭定时器
clearInterval(backToTopTimer);
window.scrollTo(0, 0);
backToTopTimer = null;
}
window.scrollTo(0, leftY);
}, 10);
}, false);
如上述代码,每次往上滚动100px,并直至滚动至顶部。滚动间隔为10ms。
但是,这样滚动并不流畅,或者说不自然。这种情况产品同学肯定是不会答应的,所以,还是的改!
又是一番苦战…,修改js代码如下:
var backToTopTimer = null;
elTop.addEventListener("click", function(){
var totalTop = getScrollY(); // 获取总共滚动的距离。
var step = 100, leftY = totalTop; // 每个定时器期间移动距离,以及剩余距离
if(backToTopTimer){
clearInterval(backToTopTimer);
backToTopTimer = null;
}
backToTopTimer = setInterval(function(){
step = Math.ceil(leftY / 5);
leftY -= step;
if(leftY <= 0){
// 关闭定时器
clearInterval(backToTopTimer);
window.scrollTo(0, 0);
backToTopTimer = null;
}
window.scrollTo(0, leftY);
}, 10);
}, false);
只是加了这么一句step = Math.ceil(leftY / 5);
,滚动便自然了许多。
每次滚动距离Math.max(Math.pow(0.8, n) * totalTop, 1)
,这里牵扯到数学问题,我们就此打住,否则愧对数据老师。
再进一步,能不能在回到顶部按钮出现和消失的时候增加一个动画呢?
答案是肯定的,那就干起来吧。
…
又经过一番努力,最终代码如下:
.back-top {
display: none;
position: fixed;
width: 43px;
height: 43px;
background-size: 43px 43px;
right: 20px;
bottom: 30px;
z-index: 1;
}
.back-top img{
height: 100%;
width: 100%;
}
.back-top.show{
animation: comeIn 0.5s 1;
animation-timing-function: linear;
display: block !important;
}
.back-top.hide{
animation: comeOut 0.5s 1;
animation-timing-function: linear;
display: block !important;
right: -50px;
}
@keyframes comeIn
{
0%{
right: -50px;
transform: rotate(0deg);
}
100%{
right: 20px;
transform: rotate(-360deg)
}
}
@keyframes comeOut
{
100%{
right: -50px;
transform: rotate(360deg);
}
0%{
right: 20px;
transform: rotate(0deg);
}
}
window.addEventListener("scroll", function(){
var top = getScrollY();
if(top > 100){
elTop && (elTop.className = "back-top show") ;
// 原代码 elTop && (elTop.style.display = "block") ;
}
else{
elTop && (elTop.className = "back-top hide");
// 原代码 elTop && (elTop.style.display = "none") ;
}
}, false);
代码解析
- 新增两个animation,show和hide
- 当触发按钮显示隐藏时分别为elTop添加show和hide的class。
至此,开完完毕,一个带动画的回到顶部按钮实现完成。样式截图如下:
最终源代码请参考我code pen:http://codepen.io/shushanfx/pen/jAJLzq