纯CSS实现页面回到顶部功能

回到顶部功能；第一时间可能想到的是用JavaScript方法实现；比如下面的代码；

function scrollToTop() {    
    window.scroll({      
        top: 0,     
        left: 0,     
        behavior: 'smooth' // 平滑滚动   
    });
}

但今天发现一个使用CSS方法就可以实现的办法；

方法很简单；核心CSS代码如下，

html {  
    /* 平滑滚动 */  
    scroll-behavior: smooth;
}

配合HTML代码

<nav> 
    Scroll to: 
    <a href="#sectionA" class="link bg-red">A</a>
    <a href="#sectionB" class="link bg-blue">B</a> 
    <a href="#sectionC" class="link bg-green">C</a>
    <!-- 回到顶部按钮 -->  
    <a href="#top" class="link bg-green">top</a>
</nav>
<div class="wrapper">  
    <!-- 顶部写一个空的div；id=top -->  
    <div id="top"></div> 
    <div id="sectionA" class="section bg-red">A</div>
    <div id="sectionB" class="section bg-blue">B</div>
    <div id="sectionC" class="section bg-green">C</div>
</div>

这样实现了，是不是很简单。

就是一个回到顶部的a标签，href加一个锚点；指向一个在顶部位置的空元素，是不是很简单

下面是效果图