JavaScript实现置顶功能

最新推荐文章于 2025-06-10 16:32:13 发布

weixin_34159110

最新推荐文章于 2025-06-10 16:32:13 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 java ViewUI

原文链接：https://segmentfault.com/a/1190000010291386

本文介绍了一种使用JavaScript实现页面元素平滑置顶的方法。通过getBoundingClientRect()获取元素距离视窗顶部的距离，并利用setTimeout实现逐帧滚动的效果。适用于需要平滑过渡到页面特定位置的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实现置顶功能的方式有很多，之前也用过一些，感觉比较复杂吧，自己最近做的东西需要，因此也在网上找了些资料，最后找到一个方法 getBoundingClientRect() 可以获取页面元素到浏览器视窗顶部的距离。最后代码如下：

let len = document.getElementById('flexbox').getBoundingClientRect().top;//获取元素到浏览器视窗顶部的距离
//$(document).scrollTop()为滚动条的高度
        for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) {
            setTimeout(function () {
                window.scrollTo(0, i);
            }, 0)
        }

用循环的目的主要是使得元素置顶的时候不突兀，这个过程可以通过改变i++来实现，同时需要注意一点，如果for语句用的是var i 而不是let i,定时器则需要用立即执行函数包裹来保证i能立马生效。
用这种方式实现的置顶和锚点效果差不多，如果要实现悬浮置顶（某个部分固定在顶部），则可以考虑用position:fixed来实现。
就这样吧。。。。