大话滚动条回到顶部

大话滚动条回到顶部(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
    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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