前端：回到顶部

最新推荐文章于 2024-05-20 17:41:33 发布

我家空空

最新推荐文章于 2024-05-20 17:41:33 发布

阅读量321

点赞数

分类专栏： js杂食文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/qq_45465526/article/details/121636298

版权

js杂食专栏收录该内容

23 篇文章 1 订阅

订阅专栏

类似知乎的回到顶部的功能。

但是还需要完善！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击回到顶部</title>
    <style>
        html, body{
            height: 100vh;
            width: 100vw;
            background-color: #ccc;
            box-sizing: border-box;
        }
        .content{
            height: 2000px;
        }
        .goTop{
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 7px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
            position: fixed;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="goTop">
            👆
        </div>
    </div>
    <script>
        // window.onload = getTop()
        window.onscroll = throttle(getTop, 30)
        const goTopBtn = document.getElementsByClassName('goTop')[0]
        goTopBtn.onclick = goTop

        function getTop(){
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            const goTop = document.getElementsByClassName('goTop')[0]
            if(scrollTop > 400){
                goTop.style.display = 'block'
            }else{
                goTop.style.display = 'none'
            }
        }

        //使用节流函数对滑动滚动条这一会被频繁触发的事件进行优化
        function throttle(func, wait){
            let prev = 0
            return function(){
                let now = Date.now()
                let context = this
                let args = arguments
                if(now - prev > wait){
                    func.apply(context, args)
                    prev = now
                }
            }
        }
        //让滚动条回到顶部的时候没有那么突然
        function goTop(){
            let timer
            timer = setInterval(function(){
                if(document.body.scrollTop){
                    document.body.scrollTop -= 100
                }else{
                    document.documentElement.scrollTop -= 100
                }
                let top = document.body.scrollTop || document.documentElement.scrollTop
                if(top == 0)    clearInterval(timer)
            }, 10)
        }
    </script>
</body>
</html>

参考链接

1. 20个JavaScript经典案例

2. 函数防抖和节流

我家空空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端：回到顶部

类似知乎的回到顶部的功能。但是还需要完善！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击回到顶部</title> <style>
复制链接

扫一扫