JQuery 页面如何快速滚动到顶部？

待我称王封你为后i 2021-09-10 14:50 506阅读 0赞

**JQuery 网页如何快速的滚动到顶部？现如今，页面元素不断丰富，就导致页面的纵深比较广，那么用户一旦阅读网页到了底部，就会产生一个快速滚动到顶部的需求，当然了，很多网页都这样实现了。**

### 一、效果图 ###

![这里写图片描述][20150917100605922]

文档的右下侧出现一个向上滚动的按钮，鼠标点击后，就可快速的滚动的文档顶部。

### 二、实现方法 ###

#### ①、准备材料 ####

你可以到该资源库[jquery scrollUp][]下载，也可以到其官网下载。

#### ②、导入文件 ####

font-awesome作为scrollup的必需品。

#### ③、设置scrollup的样式 ####

// 启用scroll up
    $(function() { 
        $.scrollUp({
            scrollName : "scrollUp",
            topDistance : "300",
            topSpeed : 300,
            animation : "fade",
            animationInSpeed : 200,
            animationOutSpeed : 200,
            scrollText : '<i class="fa fa-angle-up"></i>',
            activeOverlay : !1
        });
    });

这里用了font awesome中的式样“fa fa-angle-up”。

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scrollName</td> 
   <td>绑定 id，默认为 scrollUp</td> 
  </tr> 
  <tr> 
   <td>topDistance</td> 
   <td>滚动条距离顶部多少距离时出现按钮，单位为 px，默认为 300</td> 
  </tr> 
  <tr> 
   <td>topSpeed</td> 
   <td>滚动到顶部的时间，单位为 ms，默认为 300</td> 
  </tr> 
  <tr> 
   <td>animation</td> 
   <td>按钮出现、隐藏的方式，可选 fade（淡入淡出）、slide（滑块）或 none（无）</td> 
  </tr> 
  <tr> 
   <td>animationInSpeed</td> 
   <td>按钮出现的时间</td> 
  </tr> 
  <tr> 
   <td>animationOutSpeed</td> 
   <td>按钮隐藏的时间</td> 
  </tr> 
  <tr> 
   <td>scrollText</td> 
   <td>按钮内的文字，默认为 Scroll to top</td> 
  </tr> 
  <tr> 
   <td>activeOverlay</td> 
   <td>是否显示参考线，值为十六进制颜色值或 false，默认为 false</td> 
  </tr> 
 </tbody> 
</table>

#### ④、CSS样式表 ####

#scrollUp { background-color: #777; border: medium none; bottom: 100px; color: #eee; font-size: 40px; height: 46px; line-height: 1; opacity: 0.8; overflow: hidden; right: 20px; text-align: center; text-decoration: none; width: 46px; }
    #scrollUp:hover { background-color: #333; }

> 笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》  
> 本文出自:【[沉默王二的博客][Link 1]】

[20150917100605922]: /images/20210506/b1d4c9e2216e4899b3b37c57e1145761.png
[jquery scrollUp]: http://download.csdn.net/detail/qing_gee/9113385
[Link 1]: http://blog.csdn.net/qing_gee