锚点平滑滚动

最新推荐文章于 2023-06-30 12:05:19 发布

晓峰666

最新推荐文章于 2023-06-30 12:05:19 发布

阅读量601

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_44766377/article/details/127581420

版权

一般的锚点滚动会比较生硬添加

scroll-behavior:smooth; 这一句css就会比较平滑的将视口移动到锚点处

<div style="display:flex;">
      <div style="position: fixed">
        <div><a href="#burlywood">burlywood</a></div>
        <div><a href="#red">red</a></div>
        <div><a href="#pink">pink</a></div>
        <div><a href="#khaki">khaki</a></div>
      </div>
      <div>
          <div id="burlywood" style="height: 500px;width: 400px;background-color: burlywood"></div>
          <div id="red" style="height: 500px;width: 400px;background-color: red"></div>
          <div id="pink" style="height: 500px;width: 400px;background-color: pink"></div>
          <div id="khaki" style="height: 500px;width: 400px;background-color: khaki"></div>
      </div>
    </div>