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

本文链接：https://blog.youkuaiyun.com/zhaokejin521/article/details/109894489

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

一、ScrollUp使用

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

ScrollUp提供了四种样式

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

<script type="text/javascript"src="https://github.com/markgoodyear/scrollup/blob/master/js/jquery.scrollUp.min.js"></script>

该代码在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>当网页内容过长，你浏览到底部需要回到顶部时，是不是希望&ldquo;一键直达&rdquo;呢？scrollUp 就是这样一款插件，它能够让用户滚动条滚动到一定的位置时（可设置），右下角出现&ldquo;滚动到顶部&rdquo;的按钮，点击后，页面就是慢慢的滚动到顶部，而不是硬生生的直接回到顶部，提高了用户体验。</p>

<p>scrollUp 还提供了 3 种主题，在 css 文件夹下。当然你可以自定义。</p>
<h2>使用方法</h2>
<h3>引入文件</h3>
<pre>
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.scrollUp.min.js&quot;&gt;&lt;/script&gt;</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 {
&nbsp;&nbsp;&nbsp; bottom: 20px;
&nbsp;&nbsp;&nbsp; right: 20px;
&nbsp;&nbsp;&nbsp; padding: 10px 20px;
&nbsp;&nbsp;&nbsp; background: #555;
&nbsp;&nbsp;&nbsp; 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>
&lt;script type="text/javascript&quot; src="js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type="text/javascript&quot; src="js/jquery.nicescroll.js&quot;&gt;&lt;/script&gt;
</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.youkuaiyun.com/download/zhaokejin521/13133750

彩蛋

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

欢迎进群交流探讨！