js+JQuery实现返回顶部功能
2016-01-20 15:22
639 查看
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。
首先需要在顶部添加如下html元素:
其中a标签指向锚点top,可以在顶部防止一个
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:
上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:
![](http://outofmemory.cn/ugc/upload/00/07/20121202/Actions-arrow-up-top-icon.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/Gnome-Go-Top-48.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/go-top-light-green.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/go-top-green.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/go-top-icone-7948-96.png)
有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。
这样就可以了,你可以通过下面的地址观看实际的效果:
http://outofmemory.cn/code-snippet/tagged/javascript
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。
首先需要在顶部添加如下html元素:
<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:
上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:
![](http://outofmemory.cn/ugc/upload/00/07/20121202/Actions-arrow-up-top-icon.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/Gnome-Go-Top-48.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/go-top-light-green.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/go-top-green.png)
![](http://outofmemory.cn/ugc/upload/00/07/20121202/go-top-icone-7948-96.png)
有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。
http://outofmemory.cn/code-snippet/tagged/javascript
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。
相关文章推荐
- jquery遍历给每个子元素绑定事件
- jquery图片轮播,三种方式
- jquery easyui-accordion做的动态菜单
- 属于你的jQuery提示框(Tip)插件
- JQuery自动触发事件的方法
- JQuery中DOM事件冒泡实例分析
- 【jquery创建元素添加元素】
- JQuery DataTable插件
- jquery判断密码是否一致?
- JQuery中DOM事件合成用法实例分析
- Play前后台使用JsonArray交互,以及使用JQuery遍历array数组和JsonArray
- jquery中$.each
- JQUERY阻止表单提交
- Jquery Validate验证是否为图片格式
- #学习笔记#(24)jQuery获取url参数值
- 关于 HTML5、Jquery、Phonegap 跨域问题的研究
- jquery表单提交到struts2中文乱码
- jquery全选/不选
- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- jquery获取元素高度