使用CSS来实现平滑的滚动效果

徐博士

已于 2022-07-09 14:22:26 修改

阅读量2k

点赞数

文章标签：前端 css3

于 2022-07-09 14:22:03 首次发布

本文链接：https://blog.csdn.net/attengtiong/article/details/125693064

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用CSS来实现平滑的滚动效果

需要平滑滚动效果的盒子加scroll-behavior: smooth;这个css属性即可

<style>
  html {
    height: 1000%;
    background-color: lightblue;
    scroll-behavior: smooth;
  }
  .box {
    width: 100px;
    height: 100px;
    position: fixed;
    right: 0;
    background-color: lightcoral;
    bottom: 100px;
  }
</style>

<div class="box"></div>
<script>
  document.querySelector('.box').onclick = () => document.documentElement.scrollTop = 0;
</script>