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

52次阅读

共计 3057 个字符,预计需要花费 8 分钟才能阅读完成。

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

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

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

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

二、右下角的解决

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

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

个别为了让一个元素不占空间,可能想到的办法是设置相对定位。然而这里因为设置了 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 实现了一个主动显示返回按钮的小交互,自身代码量并不简单,其实是一点点想象力,把比拟类似的成果联想起来,多多尝试,可能会带来不一样的解决方案。上面总结一下实现要点:

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

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

正文完
 0