<!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. NodeJS事件环

    1. 执行顺序说明 1. 清空主执行栈 2. 清空微任务队列 3. 运行一个timer队列的回调函数,询问微任务队列,如果有回调函数,清空. 4. 循环第3步,直到清空timer队列 5. 进入pol ...

  2. jQuery 中的事件和动画

    一.jQuery中的事件 1.加载DOM 以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件.在常规JavaScript代码中,通常使用window.onlo ...

  3. 删除唯一性约束unique

    删除唯一性约束 语法如下: alter table tableName drop index key_name;#删除唯一性约束,实际就是删除索引 drop index key_name on tab ...

  4. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  5. 当margin和padding的值是百分比时，如何计算

    对元素的margin设置百分数时,百分数是相对于自身包含块的width计算(包含块传送门),不管是margin-top/margin-bottom还是margin-left/margin-right. ...

  6. Manthan, Codefest 19

    目录 Contest Info Solutions A. XORinacci B. Uniqueness C. Magic Grid D. Restore Permutation E. Let The ...

  7. P/NP问题

    目录 P NP NPC NPH 写在开头 1.多项式 如公式:y = axn-bxn-1+c.Ο(log2n).Ο(n). Ο(nlog2n).Ο(n2)和Ο(n3)称为多项式时间.Ο(2n)和Ο(n ...

  8. 【LGR-059】洛谷7月月赛题解

    传送门 比赛的时候正在大巴上,笔记本没网又没电(不过就算有我估计也不会打就是了) \(A\) 咕咕 const int N=(1<<10)+5; int a[N][N],n; void s ...

  9. vue中class用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 深入理解JVM虚拟机5：虚拟机字节码执行引擎

    虚拟机字节码执行引擎   转自https://juejin.im/post/5abc97ff518825556a727e66 所谓的「虚拟机字节码执行引擎」其实就是 JVM 根据 Class 文件中给 ...