一行css实现页面平滑滚动

最新推荐文章于 2024-06-11 20:41:33 发布

为什么我要选择编程

最新推荐文章于 2024-06-11 20:41:33 发布

阅读量994

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_35467885/article/details/125881517

版权

<html>
    <head>
        <link rel="stylesheet" href="test.css" />
    </head>
    <body>
        <nav>
            <a href="#page-1">1</a>
            <a href="#page-2">2</a>
            <a href="#page-3">3</a>
          </nav>
          <div style="background-color: lightsalmon;height: 900px;width: 800px;" id="page-1"></div>
          <div style="background-color: rgb(93, 206, 149);height: 900px;width: 800px;" id="page-2"></div>
          <div style="background-color: rgb(107, 94, 143);height: 900px;width: 800px;" id="page-3"></div>
    </body>
</html>

html{
  scroll-behavior:smooth ;
}

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav{
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}