您的位置:首页 > Web前端 > JQuery

js+JQuery实现返回顶部功能

2016-01-20 15:22 639 查看
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。

首先需要在顶部添加如下html元素:

其中a标签指向锚点top,可以在顶部防止一个
<a name="top"></a>
的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:

  

上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:











有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。

这样就可以了,你可以通过下面的地址观看实际的效果:

http://outofmemory.cn/code-snippet/tagged/javascript

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: