本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下使用原生JS如何实现回到顶部效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。最近在网上看了一个案例教程――回到顶部效果(原生js实现)。由于这个效果比较实用,而且不难,所以看后也跟着实现了一次,效果还不错,于是做做笔记,以备不时之需!
1 |
|
这个a标签就是用来实现回到顶部的链接,其中 href=”javascript:;”是用来阻止a标签的默认行为,因为我们是要触发点击事件让滚动条回到顶部,而不是跳转页面。当然,如果你将其设置为 href=””,也会默认跳转到页面顶部,但是用户体验就比较差,我们主要还是想实现一种缓动的效果。OK,下面为a标签设置它的样式:
1 2 |
|
这里将a标签通过 position:fixed 固定定位在页面的右下角,具体位置可以通过 right 和 bottom 细调。给a标签设置背景图像,就是上面这张图片.默认情况是显示上半部分的图像,即40 X 40,这里由于图像大小的原因(40 X 80),故可以直接将背景位置设置 left top 。
并且默认先隐藏a标签,当我们滚动页面时,如果滚动高度大于我们电脑可视区域时再将a标签显示出来,这个主要是用JS实现,下面会说!
a标签的悬浮效果,其实很简单,只要将背景图像的位置改一下就行了,具体参考上面css代码!
相关阅读 >>
javascript中object.is()方法如何使用?(代码示例)
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者