拾点灵犀
纯CSS实现返回顶部

2022-06-27T19:06:46.png
  个人习惯浏览网站有返回顶部的指向,点击返回到顶部,百度和Google就为何不肯加个这样链接以便浏览,有时网页实在太长了,返回到顶部拖到手累眼累。微信这一点就做得很方便,在手机顶部直接双击下状态栏就能返回顶部。于是乎能用CSS解决,就用CSS解决,方便简单,也便于更改。

  还真给我找到解决方法,特此记录一下:CSS sticky实现返回顶部 ,作者在里面图文并茂介绍得很详细它的工作原理。并且提供预览和代码。

预览: https://codepen.io/xboxyan/pen/MWmGoER?spm=a2c6h.12873639.article-detail.7.2beb3bc02m1o5n

  只需在主题加一行<a href="#" class="back"></a>,然后对此链接进行CSS定义即可:

html,body{
  scroll-behavior: smooth;
}
.back{
  position: sticky;
  float: right;
  top: -110px;
  margin-top: -50px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(calc(100vh + 50px));
}
署名 - 非商业性使用 - 禁止演绎 4.0