Jquery plugin ScrollUp使用和实现(返回顶部)

缺乏、安全感 2022-12-23 00:52 93阅读 0赞

ScrollUp就是当页面滚动到超出浏览器高度时出现的一个移动的顶部的按钮，点击该按钮页面滚动条移动到顶部。

一、ScrollUp使用

ScrollUp是一个轻量级的Jquery插件，它创建一个可自定义的“滚动到顶部”的按钮，在任意的网站中进行简单的调用就能达到效果。

ScrollUp提供了四种样式

tab样式  
胶囊按钮样式  
链接样式  
圆型图片样式  
也可以自定义样式  
首先我们需要先引入jquery.scrollUp.min.js，当然我们是假定了你已经引入了jquery必须文件为前提的：

该代码在github的地址为：[scrollUp][]

代码使用：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>scrollup - jQuery滚动到顶部插件演示_dowebok</title>
    
    <style type="text/css">
    body { width: 800px; margin: 8px auto 0; padding-bottom: 30px; font-size: 14px;}
    h1 { margin: 20px 0 40px; text-align: center; font: 32px Microsoft Yahei;}
    h2, h3 { margin: 1em 0 0.5em; font-family: Microsoft Yahei; font-weight: 500;}
    p { line-height: 26px;}
    pre { padding: 20px; line-height: 20px; background-color: #f0f0f0;}
    .vad { margin:30px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
    .vad a { display:inline-block; margin:0 5px; padding:3px 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
    .vad a:hover { color:#fff; background-color:#000;}
    table { width: 100%; border-spacing: 0; border-collapse: collapse;}
    th, td { padding: 10px; border: 1px solid #ddd;}
    .a728x90 { width: 728px; height: 90px; margin: 0 auto;}
    </style>
    
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/themes/pill.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.scrollUp.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.5/jquery.nicescroll.js"></script>
    
    <script>
    /* 默认 */
    	$(function () {
    	//	$.scrollUp();
    		$.scrollUp({
    			scrollName : "scrollUp",
    			topDistance : "300",
    			topSpeed : 300,
    			animation : "fade",
    			animationInSpeed : 200,
    			animationOutSpeed : 200,
    			scrollText :'<i class="fa fa-angle-up"></i>',
    			activeOverlay : !1
    		});
    		$('#content').niceScroll({
    			cursorcolor: "#ccc",//#CC0071 光标颜色
    			cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
    			touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
    			cursorwidth: "5px", //像素光标的宽度
    			cursorborder: "0", // 游标边框css定义
    			cursorborderradius: "5px",//以像素为光标边界半径
    			autohidemode: false //是否隐藏滚动条
    		});
    	});
    
    
    /* 全部参数 */
    /*
    $(function () {
        $.scrollUp({
            scrollName: 'scrollUp', // Element ID
            topDistance: '300', // Distance from top before showing element (px)
            topSpeed: 300, // Speed back to top (ms)
            animation: 'fade', // Fade, slide, none
            animationInSpeed: 200, // Animation in speed (ms)
            animationOutSpeed: 200, // Animation out speed (ms)
            scrollText: 'Scroll to top', // Text for element
            activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        });
    });
    */
    </script>
    </head>
    
    <body id="content">
    <h1>scrollUp - jQuery滚动到顶部插件演示</h1>
    
    <p>请往下滚动，再观察右下角。</p>
    <p>当网页内容过长，你浏览到底部需要回到顶部时，是不是希望“一键直达”呢？scrollUp 就是这样一款插件，它能够让用户滚动条滚动到一定的位置时（可设置），右下角出现“滚动到顶部”的按钮，点击后，页面就是慢慢的滚动到顶部，而不是硬生生的直接回到顶部，提高了用户体验。</p>
    
    <p>scrollUp 还提供了 3 种主题，在 css 文件夹下。当然你可以自定义。</p>
    <h2>使用方法</h2>
    <h3>引入文件</h3>
    <pre>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.scrollUp.min.js"></script></pre>
    
    <h3>调用方法</h3>
    <pre>
    <code>$(function () {
        $.scrollUp();
    });</code></pre>
    
    <h2>参数</h2>
    <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>
    
    <h2>自定义</h2>
    <p>你可以通过 CSS 自定义按钮，让按钮更适合你的项目。例如：</p>
    <pre>
    #scrollUp {
        bottom: 20px;
        right: 20px;
        padding: 10px 20px;
        background: #555;
        color: #fff;
    }
    </pre>
    
    <p class="vad">
        <a href="http://www.cicoding.com/" target="_blank">cicoding.com</a>
        <a href="http://www.cicoding.com/" target="_blank">说 明</a>
        <a href="http://www.cicoding.com/" target="_blank">下 载</a>
    </p>
    
    1. 引用jquery.js和jquery.nicescroll.js
    <pre>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.nicescroll.js"></script>
    </pre>
    2.通过jquery获取需要添加滚动条的元素，调用niceScroll函数进行配置即可使用该插件，如下
    <pre>
    $('#content').niceScroll({
        cursorcolor: "#ccc",//#CC0071 光标颜色
        cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
        touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
        cursorwidth: "5px", //像素光标的宽度
        cursorborder: "0", // 游标边框css定义
        cursorborderradius: "5px",//以像素为光标边界半径
        autohidemode: false //是否隐藏滚动条
    });
    </pre>
    
    
    <style>
    * { margin: 0; padding: 0;}
    h1 { margin: 40px 0; font: 32px "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; text-align: center;}
    
    .vad { margin: 50px 0 10px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; text-align:center;}
    .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align: center; color: #eee; text-decoration: none; background-color: #222;}
    .vad a:hover { color: #fff; background-color: #000;}
    </style>
    
    </body>
    </html>

代码下载地址：[https://download.csdn.net/download/zhaokejin521/13133750][https_download.csdn.net_download_zhaokejin521_13133750]

### 彩蛋 ###

欢迎加入请求群学习交流：  
Java/Python架构师①群：415777345  
电脑PC用户快捷加入（点击超链接）：[415777345][]  
手机QQ扫码加入：  
![在这里插入图片描述][20210402233658208.png]  
SpringBoot SpringCloud Docker K8s ①群：317945902  
电脑PC用户快捷加入（点击超链接）：[317945902][]  
手机QQ扫码加入：  
![在这里插入图片描述][20210402233641203.png]  
欢迎进群交流探讨！

[scrollUp]: https://github.com/markgoodyear/scrollup
[https_download.csdn.net_download_zhaokejin521_13133750]: https://download.csdn.net/download/zhaokejin521/13133750
[415777345]: https://jq.qq.com/?_wv=1027&k=WZ3CYmkn
[20210402233658208.png]: /images/20221120/1a5109ec396f4e37bdee91698f8937c3.png
[317945902]: https://jq.qq.com/?_wv=1027&k=oD9nEEFl
[20210402233641203.png]: https://img-blog.csdnimg.cn/20210402233641203.png