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

      顾名思义,ScrollUp就是当页面滚动到超出浏览器高度时出现的一个移动的顶部的按钮,点击该按钮页面滚动条移动到顶部。ScrollUp是一个轻量级的Jquery插件,它创建一个可自定义的“滚动到顶部”的按钮,在任意的网站中进行简单的调用就能达到效果。

ScrollUp提供了四种样式

  1. tab样式
  2. 胶囊按钮样式
  3. 链接样式
  4. 圆型图片样式
  5. 也可以自定义样式

源码地址:

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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郎涯技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值