面试经验积累

最新推荐文章于 2024-11-06 00:13:23 发布

BHDDGT

最新推荐文章于 2024-11-06 00:13:23 发布

阅读量196

点赞数 3

文章标签：面试职场和发展

本文链接：https://blog.csdn.net/BHDDGT/article/details/140834223

版权

2024-7-31 今天去面试了，复盘下今天问到的问题，就一道，因为面试的公司不大就不贴名字了。

要求：实现一个回到顶部的标签，位于顶部的时候不出现，下滑到页面的一定位置才出现，实现一个点击标签回到顶部的动画，动画要匀速。

位于顶部的时候不出现，下滑到界面位置才出现。我是用sticky实现的，但是动画因为平常很少使用所以没写出来，下面是用文心一言实现的一个代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div class="content">
        <p>滚动查看效果...</p >
    </div>
    <div class="toTop" id="backToTop">回到顶部</div>
    <div class="content">
        <p>滚动查看效果...</p >
    </div>
    <div class="content">
        <p>滚动查看效果...</p >
    </div>
</div>
</body>
<style>
    html,body{
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .content{
        height: 1500px;
    }
    .toTop{
        position: sticky;
        top: 90%;
        left: 95%;
        height: 50px;
        width: 50px;
        background-color: green;
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded',function(){
        var toTop = document.getElementById('backToTop');
        toTop.addEventListener('click',function(){
            smoothScroll();
        });
        function smoothScroll(){
            var current = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            if(current > 0){
                window.requestAnimationFrame(function() {
                    var toScroll = current / 5; // 调整这个值来改变滚动速度
                    window.scrollTo(0, current - Math.floor(toScroll));
                    if (current - Math.floor(toScroll) > 0) {
                        smoothScroll();
                    }
                });
            }
        }
    })
</script>
</html>