多语言展示
当前在线:1136今日阅读:103今日分享:49

利用JQuery, 平滑返回页面顶端,(TOP功能)

利用JQuery插件, 当网页页面很长,下拉到下面时,平滑返回到页面顶端,(TOP功能)
工具/原料
1

Jquery脚本库

2

Jquery插件(backTop)

方法/步骤
1

首先引用Jquery脚本库,和 返回顶端的Jquery插件backTop

2

TOP按钮样式,主要是CSS位置等,固定在页面右边。实际应用中,可以用背景图等再美化一下按钮。

3

对应HTML代码,

4

加上对应JS脚本,绑定按钮事件,当TOP按钮点击时,触发返回页面顶部,

5

插件本身附带实用功能,当页面没有下拉太多时,TOP按钮是不可见的,如图,

6

当下拉了页面到一定距离时,TOP按钮才显示出来,当然这个距离是可以自己设定的。

注意事项
1

要记得引入Jquery脚本库。

2

Jquery TOP插件脚本要写在Jquery脚本库后面,顺序不可反。

推荐信息