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

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.