scrollUp.js Javascript/jQuery 页面返回顶部

来源：互联网发布：移民新西兰知乎编辑：程序博客网时间：2024/05/31 19:28

顾名思义，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>

0 0