使用ScrollUp添加返回顶部功能
下载ScrollUp https://github.com/markgoodyear/scrollup
在网页中引用jquery.scrollUp.js
、jquery.easing.js
、jquery.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/说明选用。
-
Tags:
- JavaScript
- JS
- JQuery
- ScrollUp
- 返回顶部