scroll-behavior 讓滾動更順滑

 

使用場景：

<header>
        <a href="#part1">第一屏</a>
        <a href="#part2">第二屏</a>
        <a href="#part3">第三屏</a>
        <a href="#part4">第四屏</a>
    </header>

    <section id="part1">這是第一屏內容</section>
    <section id="part2">這是第二屏內容</section>
    <section id="part3">這是第三屏內容</section>
    <section id="part4">這是第四屏內容</section>

　　

html{
       scroll-behavior:smooth; 
    }
        body,p{margin: 0;padding: 0;font-family:'Microsoft yahei';}
        header{
            height:40px;
            line-height: 40px;
            background: #efefef;
            text-align: center;
            margin-bottom: 10px;
        }
        header a{
            color:#333;
            text-decoration:none;
            padding:0 20px;
        }
        
        section{
            width: 100%;
            height: 500px;
            line-height: 500px;
            font-size: 20px;
            text-align: center;
            background: #efefef;
            margin-bottom:5px;
        }

　　

 

Gif有時候會卡，可以點擊此鏈接查看線上demo(chrome版本號高於61才能看出來效果哦)

 

目前兼容性不太好，如下：