本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果。
我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧。
这种点击回到顶部的功能特效,可以很大程度上提高用户体验。那么实现这样的功能也是非常简单的。
下面我们就通过简单的代码示例,为大家介绍用jquery实现点击回到顶部的功能方法。
回到顶部特效
网页内容
返回顶部
此段代码中我们主要引用了一个jquery的线上库,并写了一些简单的HTML页面和js代码判断,当滚动条距顶部的高度大于150的话,则设置按钮出现,相反则设置按钮隐藏。最后通过浏览器访问,效果如下:

然后我们拖动滚动条往下,会缓慢出现回到顶部的按钮,效果如下图:

jQuery可爱火箭回到顶部效果代码,当滑动网页到下面的时候,会出现小火箭,到顶部,小火箭消失,点击小火箭有个返回顶部的效果,一般我们在商城网站或者企业网站中经常用到这样的效果,php中文网推荐下载!
注意:
fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。(本例中,参数设为1000毫秒,表示选定元素的淡入过渡时间为1000毫秒,如果设为0,则会立即出现被选元素。)
fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。(参数同上)
本篇文章就是关于jquery实现网页回到顶部的效果方法介绍,简单易懂,希望对需要的朋友有所帮助!
想要了解更多前端相关知识,可以关注PHP中文网jQuery视频教程或者 HTML视频教程,CSS视频教程 、Bootstrap视频教程等等相关视频教程,欢迎大家参考学习!









