<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="generator" content="58IMG.COM" />

    <title>jQuery返回顶部插件-jquery.scrollUp.min.js</title>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- 回到顶部 jquery插件 -->

<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>

    <style type="text/css">

        .content { height: 1500px; }

        #scrollUp { background-image: url("top.png"); bottom: 20px; right: 20px; width: 38px; height: 38px; }

    </style>

</head>

<body>

    <div class="content"></div>

    <script type="text/javascript">

        $(function () {

            //scrollup

            $.scrollUp({

                scrollName: 'scrollUp', // Element ID

                topDistance: '300', // Distance from top before showing element (px)

                topSpeed: 300, // Speed back to top (ms)

                animation: 'fade', // Fade, slide, none

                animationInSpeed: 200, // Animation in speed (ms)

                animationOutSpeed: 200, // Animation out speed (ms)

                scrollText: '', // Text for element

                activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'

            });

        });

    </script>

</body>

</html>

除以上代码还需引入一张点击的图标图片，

最新学习canvas,可以利用canvas绘制向上箭头的图标，代替 箭头图片：【推荐】

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="generator" content="58IMG.COM" />

    <title>jQuery返回顶部插件-jquery.scrollUp.min.js</title>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- 回到顶部 jquery插件 -->

<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>

    <style type="text/css">

        .content { height: 1500px; }

        #scrollUp { background-color:#454545; border-radius:30px; bottom: 20px; right: 20px; width: 38px; height: 38px; }

    </style>

</head>

<body>

    <div class="content">

    </div>

    <script type="text/javascript">

        $(function () {

            //scrollup background-image: url("top.png");

            $.scrollUp({

                scrollName: 'scrollUp', // Element ID

                topDistance: '300', // Distance from top before showing element (px)

                topSpeed: 300, // Speed back to top (ms)

                animation: 'fade', // Fade, slide, none

                animationInSpeed: 200, // Animation in speed (ms)

                animationOutSpeed: 200, // Animation out speed (ms)

                scrollText: '<canvas id="cvs" width="38px;" height="38px;" ></canvas>', // Text for element

                activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'

            });

            var canvas = document.getElementById('cvs');

            cxt=canvas.getContext('2d');

            cxt.beginPath();

            cxt.lineCap = 'round';//圆线头

            cxt.moveTo(13, 22);

            cxt.lineTo(19,14);

            cxt.lineTo(25,22);

            cxt.strokeStyle = "#FBFBFB";

            cxt.lineWidth = 3;

            cxt.stroke();

        });

    </script>

</body>

</html>

Jquery回到顶部插件【query.scrollUp.js】使用的更多相关文章

  1. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  2. jQuery回到顶部

    jquery回到顶部 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=& ...

  3. Jquery 回到顶部

    转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图)   先来看几个图片 ...

  4. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  5. jquery 回到 顶部

    1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...

  6. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  7. Jquery回到顶部功能

    问题描述: 在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化. 问题的产生 ...

  8. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  9. Jquery回到顶部效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

随机推荐

  1. ckeditor自定义工具栏

    /** * 获取编辑器工具栏自定义参数 * @param type 类型 simple=极简版 basic=基本版 full=完整版 */ function get_ckeditor_toolbar( ...

  2. 10月清北学堂培训 Day 7

    今天是黄致焕老师的讲授~ 历年真题选讲 NOIP 2012 开车旅行 小 A 和小 B 决定外出旅行,他们将想去的城市从 1 到 n 编号,且编号较小的城市在编号较大的城市的西边.记城市 i 的海拔高 ...

  3. Java学习日记基础（五）——类、对象之this、静态变量(类变量)、静态方法(类方法)、四大特征

    this 赵本山问奥尼尔:“我的爸爸的爸爸是谁?” 奥尼尔:“不知道” 赵本山:“你傻啊,是我爷爷” 奥尼尔回去问科比:“我的爸爸的爸爸是谁?” 科比:“不知道” 奥尼尔:”你傻啊,是赵本山的爷爷“ ...

  4. jQuery Cookie (内附 上百行的中文使用手册,与 所有的注释中文翻译)

    jQuery Cookie (内附 上百行的中文使用手册,与 所有的注释中文翻译) 博主亲自翻译. 大家多多捧场. 更多资源请点击"查看TA 的资源" .全场通通 2积分. htt ...

  5. nginx做反向代理时出现302错误

    现象:nginx在使用非80端口做反向代理时,浏览器访问发现返回302错误 详细现象如下: 浏览器请求登录页: 输入账号密码点击登录: 很明显登录后跳转的地址少了端口号. 原因:proxy.conf文 ...

  6. checkbox取反

    var qxs = document.getElementsByName("qx"); for(var i=0;i<qxs.length;i++){   var e=qxs[ ...

  7. 问题分析——Maven打包后发版，静态资源找不到

    一.背景 Xxl-Job-Admin(开源分布式调度中心)项目在本地运行正常,Jenkins发版到测试环境,发版成功后,打开管理页面,页面css.js找不到. 怀疑是Maven没有把静态资源打包进去导 ...

  8. 自然语言处理基础与实战（8）- 主题模型LDA理解与应用

    本文主要用于理解主题模型LDA(Latent Dirichlet Allocation)其背后的数学原理及其推导过程.本菇力求用简单的推理来论证LDA背后复杂的数学知识,苦于自身数学基础不够,因此文中 ...

  9. VMware Workstation虚拟机打开系统时，提示“无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件。是否在安装 VMware Workstation 后重新引导?”

    VMware Workstation虚拟机打开系统时,提示“无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件.是否在安装 VMware Workstation 后重新引导? ...

  10. usb 设备 复位

    How to Reset USB Device in Linux by ROMAN10 on MAY 4, 2011 · 9 COMMENTS   USB devices are anywhere n ...