<!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 if exists和 if not exists 的关键字用法

    if exists和if not exists关键字用法   1.介绍  if not exists 即如果不存在,if exists 即如果存在 2.使用  a.判断数据库不存在时  if not ...

  2. 081_使用 awk 编写的 wc 程序

    #!/bin/bash#自定义变量 chars 变量存储字符个数,自定义变量 words 变量存储单词个数#awk 内置变量 NR 存储行数#length()为 awk 内置函数,用来统计每行的字符数 ...

  3. CF280C Game on Tree 概率与期望

    利用期望的线性性,即 $E(a+b)=E(a)+E(b)$. 对于所有点分别求一下期望然后累加即可. code: #include <bits/stdc++.h> #define N 10 ...

  4. CF358D Dima and Hares dp

    状态的定义挺奇特的~ 发现最终每一个物品一定都会被选走. 令 $f[i][0/1]$ 表示 $a[i]$ 在 $a[i-1]$ 前/后选时 $1$~$(i-1)$ 的最优解. 因为一个数字的价值只由其 ...

  5. 【luogu4474王者之剑】--网络流

    题目描述 这是在阿尔托利亚·潘德拉贡成为英灵前的事情,她正要去拔出石中剑成为亚瑟王,在这之前她要去收集一些宝石. 宝石排列在一个n*m的网格中,每个网格中有一块价值为v(i,j)的宝石,阿尔托利亚·潘 ...

  6. python获取当前天气情况

    利用 Python 从互联网公开服务中获取天气预报信息.天气信息来源网站:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx实现以下 ...

  7. C#中指针的简单使用

    原来C#不仅仅支持和C/C++中指针(或者说是引用)很像的委托delegate,还支持在unsafe代码块中使用指针,从而写非托管的代码(人为不让垃圾回收机制来管理相应的内存).在unsafe中就可以 ...

  8. CF1174B Ehab Is an Odd Person(排序+结论)

    做法 一个显然的结论就是如果至少有一个奇数和一个偶数,那么是可以随意调整的,也就是升序排序 否则不可以进行任何操作 Code #include<bits/stdc++.h> using n ...

  9. java.lang.ClassNotFoundException:org.apache.struts2.dispatcher.FilterDispatcher

    老版本的Struts2升级,启动报的错. org.apache.struts2.dispatcher.FilterDispatcher 是web.xml中对struts2  2.2版本的接入点的类. ...

  10. 项目管理工具-OmniPlan 3 for Mac

    链接:https://pan.baidu.com/s/1tp_37fHXHwJuklL1nNSwig  密码:l0sf 激活迷药(里面自带的keygen不能用,用这个好使): Name: Appked ...