<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery动态回到顶部特效</title>
</head>
<body>
<style>
.up {position: fixed;bottom:35px;right:35px;cursor:pointer;display:none;}
</style>
<p>Just do what you want do!!!</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="up">&uarr;</div>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  var fh=$('.up');
    $(document).scroll(function() {
             var gdt=$(window).scrollTop();
             if(gdt>=200){
                 fh.css('display','block')
             }else{
                  fh.css('display','none')
             }            
        });        
    fh.click(function(){
        var c=$(window).scrollTop();
        if(c>0){
            timg=setInterval(function(){
                $(window).scrollTop(c);
                if(c>0){
                    c-=10
                }else{
                    clearInterval(timg)
                }
            },0.5)
        }
    });
</script>
</body>
</html>

用Jquery写返回顶部代码的更多相关文章

  1. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  2. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. 简单的JQuery top返回顶部

    一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...

  4. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  5. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  6. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  7. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

  8. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  9. jQuery实现返回顶部

    由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...

随机推荐

  1. jenkins集成sonar代码审核工具

    在项目测试管理过程中,项目上线很多时候时间仓促,导致代码质量不高,测试时间不充分会导致线上出现各种各样的问题,这个时候一方面是增加测试的质量把控,还要从根本上解决开发小哥的代码质量问题.而Sonar这 ...

  2. 【Linux】- Systemd 实战篇

    转自:阮一峰的网络日志 一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件. 如果你想让该软件开机启动,就执行下 ...

  3. VScode Python no module的解决方法

    在lauch.json中,修改 "env": {}为 "env": {"PYTHONPATH":"${workspaceRoot} ...

  4. java-day20

    注解:说明程序的,给计算机看的 注释:用文字描述程序的,给程序员看的 定义:注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性.与类.接口.枚举是在 ...

  5. 从零开始搭建系统2.1——Nexus安装及配置

    在安装配置Nexus时,请先确定您已经配置好jdk 1.创建目录 2.下载安装包 [root@localhost usr]# cd nexus 下载地址:https://www.sonatype.co ...

  6. 解决mac下，javac命令出现的乱码问题

    今天突然检查我的jdk安装,发现出现了乱码 一,出现乱码

  7. wireshark 分析 TCP 请求（转）

    转自:http://supben.iteye.com/blog/2329780 先看一段代码  程序片段是一个RPC调用 ,根据简历id获取简历实体.本地IP 10.252.156.132, 远程ip ...

  8. Effective C++之条款1：视C++为一个语言联邦

    C++中的sub-languages有如下四种: C Object-Oriented C++:   (classes ,encapsulation(封装),inheritance(继承),polymo ...

  9. DataWorks2.0的“业务流程”与1.0的“工作流”的对比

    DatwWorks终于升级2.0了,心情万分激动之余,又有一丝担忧.因为,没法再创建新的旧版工作流了...新版抛弃了“工作流”这个概念,引入了“业务流程”和“解决方案”两个新的概念.于是,作为团队Le ...

  10. 数位dp——牛客多校H

    /* x[1,A] y[1,B] x^y<C 或 x&y>C 把ABC拆成二进制后按位进行数位dp dp[pos][s1][s2][f1][f2] 表示从高到低第pos位,条件一状 ...