js 实现平滑回到顶部

js 实现平滑回到顶部

用锚链接是实现回到最简单的方法，但是从用户体验效果来说，并不是最好的。（锚链接回到顶部时太快了)

JavaScript实现，带动画版本

这里采用JavaScript脚本来实现回到顶部功能。

首先看看"返回顶部"按钮的css和html代码：

<style>
div#backToTop{
        position:fixed;
        display:none;
        bottom:100px;
        right:20px;
    }
</style>

<div id="backToTop"><a href="#top">返回顶部</a></div>

下面是JavaScript脚本部分：

<script type="text/javascript" src="/third/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
    //滚动超过一屏幕应该显示，否则消失
    var pagelookheight = document.documentElement.clientHeight;
    $(function () {
        $(window).scroll(function(){
            if ($(window).scrollTop()>pagelookheight){
                $("#backToTop").fadeIn(500);
                //$("#backToTop").style.display = "block";
            }
            else
            {
                $("#backToTop").fadeOut(500);
                //$("#backToTop").style.display = "none";
            }
        });

        //当点击跳转链接后，回到页面顶部位置
        $("#backToTop").click(function(){
            if ($('html').scrollTop()) {
                $('html').animate({ scrollTop: 0 }, 100);//动画效果
                return false;
            }
            $('body').animate({ scrollTop: 0 }, 100);
            return false;
        });
    });
});
</script>

改进，不再匀速

上面回到顶部的过程是匀速的，可以改为缓动效果，具体代码见：

http://wenxi.fun/note/javascript/gotop.html