当前位置:经验指南分享 > 游戏/数码 > 互联网 >

jquery返回顶部功能如何实现

时间2020-04-16 06:03:48 阅读数 编辑:揪着可爱 来源:指南网

在jquery中,可以使用scroll()方法,通过if判断,实现回到顶部的功能。下面小编举例讲解jquery返回顶部功能如何实现。

在jquery中,可以使用scroll()方法,通过if判断,实现回到顶部的功能。下面小编举例讲解jquery返回顶部功能如何实现。

新建一个html文件,命名为test.html,用于讲解jquery返回顶部功能如何实现。

在test.html文件内,使用a标签创建一个回到顶部的链接,并设置其id属性为btn。

在css标签内,通过id给a标签设置样式,定义其位置为页面右下解。

在js标签中,使用ready()方法在页面加载完成时,通过hide()方法将a标签隐藏。

在js标签中,再通过scroll()方法,通过if判断,当滚动条的位置处于距顶部50像素以下时,跳转链接出现(fadeIn),否则消失(fadeOut)。当点击跳转链接后,将scrollTop设置为0,回到页面顶部位置。

在浏览器打开test.html文件,点击回到顶部,查看实现的效果。

当用户滚动指定的元素时,会发生 scroll 事件。

http://www.huixingtx.cn/hulianwang/146608.html以上内容就是关于[jquery返回顶部功能如何实现] 的内容分享;经验指南内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。

文章版权及转载声明

文章内容来自网友投稿和互联网等,如果涉及您的隐私或版权,请联系我们,会及时处理;
本文网址:http://www.huixingtx.cn/hulianwang/146608.html发布于 2020-04-16 文章转载或复制请注明出处。