JavaScript 返回顶部的案例

🌙
手机阅读
本文目录结构

返回顶部的原理:

1、当页面在第一屏的时候,返回顶部的按钮是隐藏的;这个时候直接用display:none就可以了;当鼠标滚动到下一屏的时候,返回顶部的按钮会显示出来,把display设置为block;

2、当返回顶部的按钮显示的时候,点击或返回顶部;这个时候,需要把display设置为隐藏;然后让scrollTop不断的减数组;

后续再动画的文件夹内,优化成以减速度返回顶部;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body, div {
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
        }

        html, body {
            width: 100%;
            height: 1000%;
            background: #FFF38F;
        }

        #div1 {
            display: none;
            position: fixed;
            right: 5px;
            bottom: 10px;
            width: 50px;
            height: 50px;
            background: #E44072;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
    function getWin(attr) {//获取window下的元素属性
        return document.documentElement[attr] || document.body[attr];
    }
    var ch = getWin("clientHeight"),
        oDiv = document.getElementById("div1");
    window.onscroll = function () {//判断返回顶部的出现时候;
        var sT = getWin("scrollTop");
        if (sT >= ch) {
            oDiv.style.display = "block";
        }else{
            oDiv.style.display = "none";
        }
    };
    oDiv.onclick = move;
    function move() {
        oDiv.style.display = "none";
        window.clearTimeout(this.timer);
        oDiv.timer = null;
        document.body.scrollTop -= 300;
        if ((document.body.scrollTop - 300) <= 0) {
            document.body.scrollTop = 0;
            return;
        }
        oDiv.timer = window.setTimeout(move, 10);
    }
</script>
</body>
</html>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>