关于前端:CSS-sticky实现返回顶部

常常在某些文档中或者文章中能够看到这样一个 ” 返回顶部 ” 的性能，具体有两个交互

只有滚动肯定间隔才会呈现，返回到顶部从新暗藏
点击会返回到顶部

比方 LuLu UI

又是点击的，又是滚动的，看着如同必须要借助 JavaScript 了，其实也可不用，通过我的一番推敲，仅仅应用一点点 CSS 就能实现这样的交互成果，一起看看吧

这里就须要 一点点设想 了。比方这里滚动到肯定间隔才呈现，是不是有点相似 CSS sticky 的概念？只不过 sticky 的个别作用是滚动到肯定间隔，而后就固定到某一地位，mdn 解释如下

元素依据失常文档流进行定位，而后绝对它的 最近滚动先人（nearest scrolling ancestor）和 containing block (最近块级先人 nearest block-level ancestor)，包含 table-related 元素，基于 top, right, bottom, 和 left 的值进行偏移。偏移值不会影响任何其余元素的地位。

尽管和咱们须要的交互有点前途，然而依然能够通过肯定的“技巧”联结起来，先简略实现一下布局

<a class="back"></a>
<article>
... 很多内容
</article>

这里留神须要将 .back 放在后面，不然没法触发粘性定位，而后给 .back 加上 sticky 定位

.back{
  position: sticky;
  display: block;
  top: 0;
  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;
}

因为这里的 top 给的为 0，所以返回按钮在滚动过程中是贴在顶部的，如下

这时，如果把 top 改为一个负值会怎么样呢?

.back{
  /**/
  position: sticky;
  top: -30px;
}

能够看到，按钮会在超出屏幕 -30px 的中央固定，如下

接着，咱们把 .back 向下偏移整个屏幕间隔，也就是 100vh

.back{
  /**/
  position: sticky;
  top: -30px;
  transform: translateY(100vh);
}

这样，和咱们须要的成果曾经很靠近了，只是最初只呈现了一部分，如下

原理示意如下

最初，把方才的 top 设置的更小一些，直到 .back 能够齐全呈现，比方设置 -60px

.back{
  /**/
  position: sticky;
  top: -60px;
  transform: translateY(100vh);
}

这样基本上就实现了，不过还有一些问题，接着往下看

下面的实现其实还有两个布局问题须要优化：

按钮自身占据了肯定的空间
按钮个别位于右下角

个别为了让一个元素不占空间，可能想到的办法是设置相对定位。然而这里因为设置了 position: sticky，所以必定不能再设置相对定位了。除此之外，咱们还能够采纳浮动float，能够很轻易的解决以上两个布局问题

.back{
  /***/
  float: right
}

设置右浮动有两个益处，一是脱离文档流，不影响高度，二是实现居右成果，实际效果如下

其实到了这里，还是有个小问题的，当头部的文字比拟多时，能够很分明的看到右盘绕成果，如下

如何解决呢? 很简略，加一个负的 margin 就能够了

.back{
  /***/
  float: right；margin-top:-50px;/* 本身高度 */
}

然而又呈现了新的问题，底下的按钮又漏出来了

因为 top曾经被 sticky 占用，当初扭转按钮地位就只能靠 transform 了，这里能够用 calc 进行计算，同时 top 也要相应缩小本身高度

.back{
  /***/
  float: right；margin-top:-50px;/* 本身高度 */
  top: -110px; /*60 + 50*/
  transform: translateY(calc(100vh + 50px));
}

完满！

返回顶部就比拟容易了，个别能够通过 href='#' 就能够实现，当然，为了平滑的滚动，能够加上scroll-behavior: smooth

html, body {scroll-behavior:smooth;}

实际效果如下

最初附上残缺代码，非常少

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));
}

HTML 只须要在起始中央加一个标签即可

<body>
  <a class="back" href="#"></a><!-- 增加再这里就行了 -->
  <article>
  ... 很多内容
  </article>
</body>

线上代码可拜访 back-top (codepen.io)

以上借助 CSS sticky 实现了一个主动显示返回按钮的小交互，自身代码量并不简单，其实是一点点想象力，把比拟类似的成果联想起来，多多尝试，可能会带来不一样的解决方案。上面总结一下实现要点：

CSS sticky 能够实现粘性滚动成果，能够设置负值
transformY(100vh)能够偏移 1 屏幕高度，不影响占位
浮动能够脱离文档流，不影响高度
负的 margin 能够对消浮动的盘绕成果
scroll-behavior: smooth 能够实现平滑滚动
兼容性取决于 sticky，不兼容 IE

还算是一个比拟实用的小性能，尽管 JS 也能实现，然而能用 CSS 实现的何必麻烦 JS 呢？相比 JS 而言，CSS 应用起来简略不便，也无需思考加载问题，简直零老本。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

关于前端:CSS-sticky实现返回顶部

一、粘性滚动

二、右下角的解决

三、返回顶部

四、总结和阐明