顾名思义,ScrollUp就是当页面滚动到超出浏览器高度时出现的一个移动的顶部的按钮,点击该按钮页面滚动条移动到顶部。ScrollUp是一个轻量级的Jquery插件,它创建一个可自定义的“滚动到顶部”的按钮,在任意的网站中进行简单的调用就能达到效果。
ScrollUp提供了四种样式
- tab样式
- 胶囊按钮样式
- 链接样式
- 圆型图片样式
- 也可以自定义样式
源码地址:
https://github.com/markgoodyear/scrollup
官方DEMO:
https://markgoodyear.com/labs/scrollup/
测试Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ScrollUp</title>
<link type="text/css" rel="stylesheet" href="/Public/assets/jquery.scrollup/css/themes/image.css"/>
<!-- Scripts -->
<script src="/Public/assets/jquery.min.js"></script>
<script src="/Public/assets/jquery.scrollup/jquery.scrollUp.min.js"></script>
</head>
<body>
<div style="margin-top: 200px">
第1个div
</div>
<div style="margin-top: 200px">
第2个div
</div>
<div style="margin-top: 200px">
第3个div
</div>
<div style="margin-top: 200px">
第4个div
</div>
<div style="margin-top: 200px">
第5个div
</div>
<div style="margin-top: 200px">
第6个div
</div>
<div style="margin-top: 200px">
第7个div
</div>
<script>
$(function () {
$(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: false, // Text for element, can contain HTML
scrollTitle: "返回顶部", // Set a custom <a> title if required.
scrollImg: true, // 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
});
});
});
</script>
</body>
</html>