点击按钮平滑至指定位置 -- 楼层效果

最新推荐文章于 2023-04-26 16:58:34 发布

原创最新推荐文章于 2023-04-26 16:58:34 发布 · 301 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css3 #html

文章介绍了如何使用HTML锚点链接结合`scroll-behavior:smooth;`实现页面内容的平滑跳转，以及利用JavaScript的`offsetTop`和`scrollTo`方法达到相同效果。这两种方式都可以让页面在点击链接时平滑过渡到指定位置。

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

1.锚点链接:

使用锚点链接实现点击跳转到指定位置,同时在html上添加scroll-behavior:smooth;就可以在锚点切换时实现平滑效果:

设置锚点:

<-- 用id设置锚点位置 -->
<div id="one">
    我是测试文字
</div>

<-- 用a标签链接绑定跳转 -->
<a href="#one">点我跳转</a>

在css中设置平滑效果:

html{
     scroll-behavior:smooth;
}

2.js实现:

同时有可以使用js实现平滑过渡到指定地点的效果,可以使用offsetTop配合scrollTo实现:

// liNodes是获取的点击按钮节点集合
// sectionNode是对应楼层的节点集合
liNodes.forEach(function(v , i){ 
    v.addEventListener('click' , function(){
        // sectionNode[i]是点击按钮对应索引的楼层
        // sectionNode[i].offsetTop是对应楼层距离offsetParent顶部的距离
        const offsetTop = sectionNode[i].offsetTop; 
        scrollTo({
            top:offsetTop, // 赋值到顶部
            behavior:'smooth', // 平滑过渡
        })
    })
})

其中的offsetTop就是元素到offsetParent顶部的距离,这里的offsetParent是距离元素最近的一个具有定位(relative, absolute, fixed)的祖先元素,如果没有offsetParent就是body.