CSS实现回到顶部且平滑过渡(css回到页面顶部)

最近同学在项目开发的时候问了我一个问题:小白,回到顶部该怎么做呀?我当时就愣住了,心想这不是很基础的一个功能吗,然后想到该同学没有系统学过网页三剑客,我就给他讲了该怎么实现这个虽然基础但在很多项目中都很实用的功能。

CSS实现回到顶部且平滑过渡(css回到页面顶部)

不过我还是笑了,为啥,因为我不允许还有人不会这个听起来貌似高大上的回到顶部,所以我选择更一篇。(大佬绕道 /plea手)

本文仅介绍回到顶部功能的CSS做法(毕竟这么简单没有特别的需求都能用)

后续或许会出涉及JS的用法

回到顶部按钮是一个浮动在页面右下角的小图标,用户点击后可以立即返回到页面的顶部。这种设计可以有效地提高网站的可用性,尤其是在移动设备上,用户只需轻轻一按就能回到开始阅读的位置。

以下是实现回到顶部效果的 HTML 和 CSS 代码示例,功能以外的样式从简处理。

 
 

平滑过渡

很多人会嫌CSS做的回到顶部太过于生涩,点一下它就直接跳到目标锚点了,然后纷纷选择使用JS,但事实的确如此吗?CSS真的做不了平滑过渡的拉动效果吗?当然不! 一行CSS样式设置让你对它刮目相看。

 

#to_top_ball

 

#to_top_ball的内容控制

 
 

主要利用了a标签的href属性与其他标签的id属性进行配合

Q&A


Q:a标签的href属性与其他标签的class属性进行配合可以吗?
A:当然肯定必须不行呀,举个例子,你喝完孟婆汤之后被带到了一个分叉路口,前面四五个指示牌都是罗马,这你怎么走,一不小心选错就变牛马…


Q:a标签href属性的值我可以写#top吗?
A:当然肯定必须可以呀,只要想达到的效果是回到当前页面顶部就行,自己写带id的元素只是可以更灵活控制scroll到的位置。

等一个课代表评论区总结,笑。

转载请说明出处 内容投诉内容投诉
九幽软件 » CSS实现回到顶部且平滑过渡(css回到页面顶部)