纯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加一个锚点；指向一个在顶部位置的空元素，是不是感觉被骗了。

下面是效果图