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

最新推荐文章于 2024-03-18 16:24:23 发布

郎涯技术

最新推荐文章于 2024-03-18 16:24:23 发布

阅读量1.7k

点赞数

分类专栏： Web全栈文章标签： jquery插件 scrollUp

本文链接：https://blog.csdn.net/aoshilang2249/article/details/52170118

版权

Web全栈专栏收录该内容

55 篇文章 2 订阅

订阅专栏

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