给你的网站添加一个返回顶部的按钮

  本文最后更新于2019年09月09日;------ Ps: 转让宝塔面板专业版永久授权20人版.

有的网站页面比较长,当拉到最下面的时候想手动返回顶部比较麻烦,因为添加一个返回顶部的按钮是非常方便的。

直接上干货

返回按钮

<span id="back-to-top"><a href="#top">返回顶部</a></span>

添加锚点

<span id="top"></span>

CSS样式

#back-to-top {
    background-color: #8bcc99;
    bottom: 10px;
    box-shadow: 0 0 6px #72a072;
    padding: 5px 10px;
    position: fixed;
    right: 50px;
    border-radius: 8px;
    opacity: 0.7;
}

这样就添加好了一个基础的返回顶部按钮,当然也可以放上一个自己喜欢的图片按钮,用IMG标签替换返回顶部四个字,在CSS中删除关于背景色相关内容即可。

- THE END -