jQuery返回顶部插件

清疚 2022-05-17 05:22 262阅读 0赞

###### 引入文件 ######

<script src="js/jquery.min.js"></script>  
    <script src="js/jquery.scrollUp.min.js"></script>

###### JavaScript ######

$(function () {   
        $.scrollUp();  
    });

<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 { bottom: 20px; right: 20px; padding: 10px 20px; background: #555; color: #fff; }

发表评论取消回复

表情：

评论列表（有 0 条评论，262人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery插件的插件验证_jQuery的dwImageProtector插件

jquery插件的插件验证 I've always been curious about the jQuery JavaScript library. jQuery has

ゝ一世哀愁。/ 2023年02月22日 01:25/ 0 赞/ 5 阅读

相关 jQuery返回顶部插件弹性动画

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/b94cf8a83147434

以你之姓@/ 2022年09月11日 04:09/ 0 赞/ 214 阅读

相关 jquery实现的带反弹动画效果返回顶部插件

[下载地址][Link 1]jquery实现的带反弹动画效果返回顶部插件，jquery网页右下角返回顶部按钮，设计美观大气。 ![1631393315.png][]

蔚落/ 2022年09月11日 04:09/ 0 赞/ 204 阅读

相关 jQuery插件

学习要点： 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规

谁借莪１个温暖的怀抱￠/ 2022年08月18日 15:12/ 0 赞/ 370 阅读

相关返回顶部

点击返回顶部，简单易学效果图： ![Center][] 第一步：将返回按钮fixed到具体位置后隐藏第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐

拼搏现实的明天。/ 2022年08月18日 12:23/ 0 赞/ 310 阅读

相关 jquery实现返回顶部效果

jQuery("\gotop").css('display','none');jQuery(window).scroll(function()\{if(jQuery(this)

我就是我/ 2022年08月04日 13:52/ 0 赞/ 261 阅读

相关返回顶部模仿天猫的返回顶部代码 HTML JQuery CSS JavaScript

关于返回顶部这个功能，绝大部分网站都有用到，算是一个细节方面的小东西，个人觉得天猫的返回顶部这个小东西做的挺好，下面便是我模仿它的代码： HTML： </!DOCT

╰+哭是因爲堅強的太久メ/ 2022年06月18日 08:07/ 0 赞/ 287 阅读

相关 11、jQuery插件之回到顶部插件

demo1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

刺骨的言语ヽ痛彻心扉/ 2022年06月15日 07:20/ 0 赞/ 230 阅读

相关 jQuery返回顶部插件

引入文件 <script src="js/jquery.min.js"></script> <script src="js/jquery.scroll

清疚/ 2022年05月17日 05:22/ 0 赞/ 263 阅读

相关 jQuery-插件

写插件先看看jqeury的插件如何写，先了解一下如何写插件的代码。 jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQ

红太狼/ 2021年05月12日 11:51/ 0 赞/ 931 阅读