<!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. webpack 4 的 proxy

    第一种 接口有api的 setupProxy.js const proxy = require('http-proxy-middleware'); module.exports = function( ...

  2. php文件上传下载组件

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  3. 做reacat小项目的过程（我感觉适合那种刚刚接触react感觉很深奥的亲们，通过这个可以建立一个很垃圾的项目，入门吧，往深处就需要自己再看了）

    需求:做一个react框架的前端框架(包括路由,请求后端等),大概就是做一个左边导航右边显示组件页面的东西,ui为material-ui 环境: 软件:vscode 包含的知识点:使用路由来导航,使用 ...

  4. RSYNC @ERROR: AUTH FAILED ON MODULE XXX 解决思路及附录RSYNC常见问题及解决办法

    使用rsync往服务器上传文件时,client报如下异常: @ERROR: auth failed on module XXX rsync error: error starting client-s ...

  5. zabbix (5) 用户、主机等创建

    1.创建新用户: 管理---> 用户--->创建用户 在右上角用户群组这里可以按下拉菜单,为某个组创建用户,默认是all 点击创建用户以后,出现如下图: 2.创建组 管理--->用户 ...

  6. ES6---修饰器

    类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable class MyTestableCl ...

  7. 系统调优：如何解决系统报错too many open files

    一.检查系统版本是否手工升级 关于lsb_release -a和/etc/issue显示的发行版本号不同,原因只有一个:系统内核手动升级了 对于高并发高http连接的应用程序例如www或Java,会遇 ...

  8. RK3288 查看ddr信息

    转载请注明出处:https://www.cnblogs.com/lialong1st/p/10910949.html CPU:RK3288 系统:Android 5.1 1.查看ddr驱动版本号.容量 ...

  9. php手记之05-tp5模型操作数据库

    # 实例化模型 // $user = new User; // $user1 = new User(); // $user2 = model('user'); // 添加一条数据 # 方法1 // $ ...

  10. 实现一个微信小程序组件：文字跑马灯效果

    marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...