实现页面平滑滚动效果

最新推荐文章于 2024-08-03 17:05:14 发布

倥佰--

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量1.7k

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_63459487/article/details/122234979

版权

网页中经常会遇到需要内容定位，或返回顶部的功能，通常使用锚点来实现，但是页面跳转过于生硬，可以使用页面平滑效果，增强用户体验感。

1.利用CSS scroll-behavior属性实现

scroll-behavior: smooth; 一行CSS代码来处理页面的平滑滚动。兼容性还是挺不错的。

需要借助锚点。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 1000px;
            height: 300px;
            margin-bottom: 20px;
        }
        
        div:nth-child(2n) {
            background-color: skyblue;
        }
        
        div:nth-child(2n-1) {
            background-color: pink;
        }