<!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. sql server 的临时表和表变量

    临时表 本地临时表 适合开销昂贵   结果集是个非常小的集合 -- Local Temporary Tables IF OBJECT_ID('tempdb.dbo.#MyOrderTotalsByYe ...

  2. spring中少用的注解@primary解析

    这次看下spring中少见的注解@primary注解,例子 @Component public class MetalSinger implements Singer{ @Override publi ...

  3. Peaks 线段树合并

    Peaks 线段树合并 \(n\)个带权值\(h_i\)山峰,有\(m\)条山峰间双向道路,\(q\)组询问,问从\(v_i\)开始只经过\(h_i\le x\)的路径所能到达的山峰中第\(k\)高的 ...

  4. 搭建自己的博客（二十二）：通过ajax提交评论信息，并增加公式编辑功能

    编辑功能使用到了ckeditor的MathJax组件.ajax提交评论可以不用刷新浏览器. 1.变化的部分

  5. 使用Keras训练神经网络备忘录

    小书匠深度学习 文章太长,放个目录: 1.优化函数的选择 2.损失函数的选择 2.2常用的损失函数 2.2自定义函数 2.1实践 2.2将损失函数自定义为网络层 3.模型的保存 3.1同时保持结构和权 ...

  6. （3）打鸡儿教你Vue.js

    vue.js是一套构建用户界面的渐进式框架 vue关注视图层,采用自底向上增量开发的设计 <div id="app"> <p>{{ message }}&l ...

  7. 一个Maven项目在eclipse中正常，但在IDEA中启动时报错

    这个项目十有八九最初是在ecplise创建的,框架上十有八九整合了Mybatis,报的错误十有八九是 org.apache.ibatis.binding.BindingException: Inval ...

  8. [CERC2015]Juice Junctions(边双连通+字符串hash)

    做法 考虑边数限制的特殊条件,显然答案仅有\(\{0,1,2,3\}\) 0:不联通 1:连通 2:边双连通 3:任意删掉一条边都为边双连通 考虑每次删边后记录各点的边双染色情况来特判\(3\):是否 ...

  9. Dp优化之决策单调栈优化

    证明:g(i) ≤ g(j)   (i ≤ j) 令 d=g(i) , k<d , 设cut = x表示 f(i) = f(x) + w[x,i]    ( x < i ) 构造一个式子: ...

  10. 如何设置fvOptions【翻译】

    翻译自:CFD-online 帖子地址:http://www.cfd-online.com/Forums/openfoam-pre-processing/121763-how-set-fvoption ...