天天看点

使用jQuery实现返回顶部功能

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。

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

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

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

  

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

使用jQuery实现返回顶部功能
使用jQuery实现返回顶部功能
使用jQuery实现返回顶部功能
使用jQuery实现返回顶部功能
使用jQuery实现返回顶部功能

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

这样就可以了。

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

继续阅读