css实现电梯导航平滑滚动(id锚点)

今天了解到原来原生html也可以实现滚动到指定元素(之前都是用的js实现),记录一下

效果

实现基本滚动

首先在我们需要知道在我们给一个元素指定id之后,会存在对应在URL中hash值的锚点

 <p id="content">我是想要的内容</p>

然后我们可以通过a标签跳转到对应的hash路径(不知道什么叫hash的可以去了解一下路由的hash模式和history模式)

<a href="#content">滚动到指定区域</a>

在效果图中我们可以看到,点击之后hash发生了变化 (#后面的内容),然后发生了滚动

如果想要第一次进入页面就跳转到对应的元素,可以在跳转的时候就带上对应的hash值

平滑滚动

上述步骤是直接滚动到指定位置的,如果需要平滑的滚动,可以给滚动元素设置css样式

  body,html{
    scroll-behavior: smooth;
  }