使用ScrollUp添加返回顶部功能

下载ScrollUp https://github.com/markgoodyear/scrollup

在网页中引用jquery.scrollUp.jsjquery.easing.jsjquery.min.js三个JavaScript脚本,注意顺序

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

然后加入控制代码

<script>
$(function () {
	$.scrollUp();
});
</script>

以上是最简单的使用方法,还有一种带参数的方法

$(function () {
	$.scrollUp({
		scrollName: 'scrollUp',      // Element ID
		scrollDistance: 300,         // Distance from top/bottom before showing element (px)
		scrollFrom: 'top',           // 'top' or 'bottom'
		scrollSpeed: 300,            // Speed back to top (ms)
		easingType: 'linear',        // Scroll to top easing (see http://easings.net/)
		animation: 'fade',           // Fade, slide, none
		animationSpeed: 200,         // Animation speed (ms)
		scrollTrigger: false,        // Set a custom triggering element. Can be an HTML string or jQuery object
		scrollTarget: false,         // Set a custom target element for scrolling to. Can be element or number
		scrollText: 'Scroll to top', // Text for element, can contain HTML
		scroll

title: false, // Set a custom title if required. scrollImg: false, // Set true to use image activeOverlay: false, // Set CSS color to display scrollUp active point, e.g ‘#00FFFF’ zIndex: 2147483647 // Z-Index for the overlay }); });

其中easingType运动类型,可参考http://easings.net/说明选用。

发布于