首页 > 代码库 > 原生态js，返回至顶部

原生态js，返回至顶部

2024-10-24 06:10:39   209人阅读

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

<head>
    <meta charset="UTF-8">
    <title>返回至顶部</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    #top {
        width: 50px;
        height: 50px;
        background-color: red;
        position: fixed;
        right: 10px;
        bottom: 10px;
        display: none;
    }
    </style>
</head>

<body>
    <a href="javascript:;" id="top">返回至顶部</a>
    <h1>0000001</h1>
    <h1>0000002</h1>
    <h1>0000003</h1>
    <h1>0000004</h1>
    <h1>0000005</h1>
    <h1>0000006</h1>
    <h1>0000007</h1>
    <h1>0000008</h1>
    <h1>0000009</h1>
    <h1>0000010</h1>
    <h1>0000011</h1>
    <h1>0000012</h1>
    <h1>0000013</h1>
    <h1>0000014</h1>
    <h1>0000015</h1>
    <h1>0000016</h1>
    <h1>0000017</h1>
    <h1>0000018</h1>
    <h1>0000019</h1>
    <h1>0000020</h1>
    <h1>0000021</h1>
    <h1>0000022</h1>
    <h1>0000023</h1>
    <h1>0000024</h1>
    <h1>0000025</h1>
    <h1>0000026</h1>
    <h1>0000027</h1>
    <h1>0000028</h1>
    <h1>0000029</h1>
    <h1>0000030</h1>
    <h1>0000031</h1>
    <h1>0000032</h1>
    <h1>0000033</h1>
    <h1>0000034</h1>
    <h1>0000035</h1>
    <h1>0000036</h1>
    <h1>0000037</h1>
    <h1>0000038</h1>
    <h1>0000039</h1>
    <h1>0000040</h1>
    <h1>0000041</h1>
    <h1>0000042</h1>
    <h1>0000043</h1>
    <h1>0000044</h1>
    <h1>0000045</h1>
    <h1>0000046</h1>
    <h1>0000047</h1>
    <h1>0000048</h1>
    <h1>0000049</h1>
    <h1>0000050</h1>
    <h1>0000051</h1>
    <h1>0000052</h1>
    <h1>0000053</h1>
    <h1>0000054</h1>
    <h1>0000055</h1>
    <h1>0000056</h1>
    <h1>0000057</h1>
    <h1>0000058</h1>
    <h1>0000059</h1>
    <h1>0000060</h1>
    <h1>0000061</h1>
    <h1>0000062</h1>
    <h1>0000063</h1>
    <h1>0000064</h1>
    <h1>0000065</h1>
    <h1>0000066</h1>
    <h1>0000067</h1>
    <h1>0000068</h1>
    <h1>0000069</h1>
    <h1>0000070</h1>
    <h1>0000071</h1>
    <h1>0000072</h1>
    <h1>0000073</h1>
    <h1>0000074</h1>
    <h1>0000075</h1>
    <h1>0000076</h1>
    <h1>0000077</h1>
    <h1>0000078</h1>
    <h1>0000079</h1>
    <h1>0000080</h1>
    <h1>0000081</h1>
    <h1>0000082</h1>
    <h1>0000083</h1>
    <h1>0000084</h1>
    <h1>0000085</h1>
    <h1>0000086</h1>
    <h1>0000087</h1>
    <h1>0000088</h1>
    <h1>0000089</h1>
    <h1>0000090</h1>
    <h1>0000091</h1>
    <h1>0000092</h1>
    <h1>0000093</h1>
    <h1>0000094</h1>
    <h1>0000095</h1>
    <h1>0000096</h1>
    <h1>0000097</h1>
    <h1>0000098</h1>
    <h1>0000099</h1>
    <h1>0000100</h1>
    <script type="text/javascript">
    //区分浏览器内核
    // navigator专门检查浏览器特性
    //match匹配
    //判断是否是谷歌浏览器，定义个函数
    function isChrome() {
        nu = navigator.userAgent;
        if (nu.match(/chrome/i)) {
            return true;
        } else {
            return false;
        }
    }
    topobj = document.getElementById(‘top‘);
    //滚动条
    window.onscroll = function() {
        if (isChrome) {
            //谷歌
            st = document.body.scrollTop;//body兼容谷歌
            if (st > 200) {
                topobj.style.display = ‘block‘;
            } else {
                topobj.style.display = ‘none‘;
            }
        } else {
            // 非谷歌
            st = document.documentElement.scrollTop;//documentElement兼容ie、火狐
            if (st > 200) {
                topobj.style.display = ‘block‘;
            } else {
                topobj.style.display = ‘none‘;
            }
        }
        //点击返回顶部
        topobj.onclick = function() {
            if (isChrome) {
                //谷歌
                document.body.scrollTop = 0;
            } else {
                // 非谷歌
                document.documentElement.scrollTop = 0;
            }
        }
    }
    </script>
</body>

</html>

效果图：

技术分享

 

另外附件：sublime打1-100数字快捷方式：h1{$$$$$}*100

原生态js，返回至顶部


联系
我们