纯 JavaScript 实现页面返回顶部效果-CSDN博客

//它不仅可以返回顶部，它甚至可以返回任意你指定值。关键就在于scrollTo(0,0)；它里面可以传两个参数一个是水平方向的，一个是垂直方法的，你可以通过设置垂直方向的值来实现滚动到不同位置的效果，如 scrollTo(0,100)，当你点击返回顶部时，滚动条就会滚动到距离顶部100px的位置
var oTop = document.getElementById('back-top');
 oTop.onclick = function(){
 window.scrollTo(0,0);
}

它不仅可以返回顶部，它甚至可以返回任意你指定值。关键就在于scrollTo(0,0)；它里面可以传两个参数一个是水平方向的，一个是垂直方法的，你可以通过设置垂直方向的值来实现滚动到不同位置的效果，如 scrollTo(0,100)，当你点击返回顶部时，滚动条就会滚动到距离顶部100px的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js回到顶部</title>
    <style>
        body{height: 5000px} /* 设置足够高的 body，让滚动条乖乖地出来 */
        #back-top{
            display: block;
            width: 50px;
            height: 50px;
            color: #fff;
            background: #33363b;
            text-align: center;
            line-height: 50px;
            border-radius: 8px;
            position:fixed;
            right:0;
            top:50%;
        }
    </style>
</head>
<body>
    <a id="back-top" href="javascript:;">返回顶部</a>

    <script>
        /*/!*  1，scrollBy() 方法*!/
        var oTop = document.getElementById('back-top');
        var speed = 10;
        var scrollT = 0;
        oTop.onclick = function(){
            scrollMe();
        };
        function scrollMe(){
            clearInterval(oTop.toTopTimer);
            scrollT = document.body.scrollTop || document.documentElement.scrollTop;
            speed = speed*2;
            if (scrollT == 0 || scrollT <0) {
                clearInterval(oTop.toTopTimer);
                speed = 10;
            }else{
                scrollBy(0,-speed);
                oTop.toTopTimer = setInterval(scrollMe,30);
            }
        }
        //document.documentElement.scrollTop; /!* 兼容IE *!/
        //document.body.scrollTop /!* 兼容其它现代浏览器 *!/
        */

       /* /!*  2，scrollTop 赋值法*!/
        backTop('#back-top'); /!* 调用 backTop() 方法 *!/
        function backTop(obj){
            var oBackTop = document.querySelector(obj);
            var scrTop = 0;
            var iSpeed = 0;
            var backTopTimer = null;
            oBackTop.onclick = function(){
                backTopTimer = setInterval(function(){
                    scrTop = document.body.scrollTop || document.documentElement.scrollTop;
                    iSpeed =scrTop/5;
                    if(scrTop == 0 ){
                        clearInterval(backTopTimer);
                    }
                    if(document.body.scrollTop){
                        document.body.scrollTop = scrTop-iSpeed;
                    }else{
                        document.documentElement.scrollTop = scrTop-iSpeed;
                    }
                },30);
            }
        }

//document.querySelector()； //跟document。getElementById（）方法差不多，但document.querySelector()方法里面可放class、ID、tagName
*/

        
        // 3，最终版
        backTop('#back-top'); /* 调用 backTop() 方法 */
        function backTop(obj){
            var screenH = document.documentElement.clientHeight;
            var oBackTop = document.querySelector(obj);
            var scrTop = 0;
            var iSpeed = 0;
            var scrollTopTemp = 0;
            var backTopTimer = null;
            window.onscroll = function(){
                scrollTopTemp = document.body.scrollTop || document.documentElement.scrollTop;
                if(screenH < scrollTopTemp){
                    oBackTop.style.display = 'block';
                }else{
                    oBackTop.style.display = 'none';
                }
            };
            oBackTop.onclick = function(){
                backTopTimer = setInterval(function(){
                    scrTop = document.body.scrollTop || document.documentElement.scrollTop;
                    iSpeed =scrTop/5;
                    console.log(iSpeed);
                    if(scrTop == 0 ){
                        clearInterval(backTopTimer);
                    }
                    document.body.scrollTop = scrTop-iSpeed;
                    document.documentElement.scrollTop = scrTop-iSpeed;
                },30);
            }
        }

    </script>
</body>
</html>

转载于:https://my.oschina.net/u/3719399/blog/1797530