锚点实现了点击导航平滑滚动到页面指定位置的三种方法

finyouIT2026-07-07 12:37

一、使用CSS的 scroll-behavior: smooth 属性

在标签上设置了 scroll-behavior: smooth，所有带有 # 的锚点链接（如导航菜单、返回顶部按钮）都会自动带有平滑过渡效果，无需额外代码。

css 复制代码

html{
 scroll-behavior: smooth
}

html 复制代码

<a href="#item1">第一主题</a>

<p id="item1">
	<div class="title">
	    第一主题
	</div>
	<div class="content">
	    <img src="../0-static/images/image.png" alt="图片描述" title="图片标题" width="300" height="400">
	</div>
</p>

二、使用JavaScript的 scrollIntoView 方法

scrollIntoView() 方法会滚动元素的祖先容器。

js 复制代码

function handleClick(id) {
    const item4 = document.getElementById(id)
    if(!item4) return 
    item4.scrollIntoView({
         behavior:'smooth',
         block:'start',
         inline:'nearest'
    })
 }

三、使用JavaScript的 window.scrollTo 方法

scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

js 复制代码

function handleClick1  (id){
    const item3 = document.getElementById(id)
    if(!item3) return
    window.scrollTo({
        top:item3.offsetTop,
        left:item3.offsetLeft,
        behavior: "smooth",
    })
}