用JS返回顶部

最新推荐文章于 2024-03-19 10:15:00 发布

原创最新推荐文章于 2024-03-19 10:15:00 发布

· 1w 阅读

14 ·

版权

文章标签：

#css3 #vue.js #html5

javascript 专栏收录该内容

32 篇文章

订阅专栏

用JS点击返回顶部的效果

当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。

实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。

一：document.documentElement.clientWidth || document.body.clientWidth；获得可视区的宽度。后面是兼容chrome，前面是兼容其它浏览器。

二：oTop.style.left = screenw - oTop.offsetWidth +"px"; 当页面加载时，让元素的位置位于页面最右边，用可视区的宽度减去元素本身的宽度。

三：oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px"; 当页面滚动时，元素的Y坐标位置等于可视区的高度减去元素本身的高度，加上滚动距离。

四：document.documentElement.scrollTop = document.body.scrollTop =0; 当点击元素时，让页面的滚动距离为0.写两个是为了兼容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            position: relative;
        }
        
        #to_top {
            width: 30px;
            height: 40px;
            padding: 20px;
            font: 14px/20px arial;
            text-align: center;
            background: #06c;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            color: #fff
        }
    </style>
</head>

<body>
    <h1>返回顶部</h1>
    <div id="to_top">返回顶部</div>
</body>
<script>
    window.onload = function() {
        var oTop = document.getElementById("to_top");
        var screenw = document.documentElement.clientWidth || document.body.clientWidth;
        var screenh = document.documentElement.clientHeight || document.body.clientHeight;
        oTop.style.left = screenw - oTop.offsetWidth + "px";
        oTop.style.top = screenh - oTop.offsetHeight + "px";
        window.onscroll = function() {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            oTop.style.top = screenh - oTop.offsetHeight + scrolltop + "px";
        }
        oTop.onclick = function() {
            document.documentElement.scrollTop = document.body.scrollTop = 0;
        }
    }
</script>

</html>