共计 3057 个字符,预计需要花费 8 分钟才能阅读完成。
常常在某些文档中或者文章中能够看到这样一个 ” 返回顶部 ” 的性能,具体有两个交互
- 只有滚动肯定间隔才会呈现,返回到顶部从新暗藏
- 点击会返回到顶部
比方 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 应用起来简略不便,也无需思考加载问题,简直零老本。最初,如果感觉还不错,对你有帮忙的话,欢送点赞、珍藏、转发❤❤❤