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

一、使用CSS的 scroll-behavior: smooth 属性在 标签上设置了 scroll-behavior: smooth所有带有 # 的锚点链接如导航菜单、返回顶部按钮都会自动带有平滑过渡效果无需额外代码。html{scroll-behavior:smooth}ahref#item1第一主题/apiditem1divclasstitle第一主题/divdivclasscontentimgsrc../0-static/images/image.pngalt图片描述title图片标题width300height400/div/p二、使用JavaScript的 scrollIntoView 方法scrollIntoView() 方法会滚动元素的祖先容器。functionhandleClick(id){constitem4document.getElementById(id)if(!item4)returnitem4.scrollIntoView({behavior:smooth,block:start,inline:nearest})}三、使用JavaScript的 window.scrollTo 方法scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。functionhandleClick1(id){constitem3document.getElementById(id)if(!item3)returnwindow.scrollTo({top:item3.offsetTop,left:item3.offsetLeft,behavior:smooth,})}