<!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. OpenFileDialog 打开图片存储到电脑本地上

    替换图片 private void btnSkin_Click(object sender, RoutedEventArgs e) { string fName; OpenFileDialog ofd ...

  2. 2019牛客国庆集训派对day7 A 2016

    链接:https://ac.nowcoder.com/acm/problem/52800来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  3. 十分钟学习 react配套的类型检测库——prop-types的运用

    js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...

  4. !vtop 命令

    这命令超级牛B ,用途是算内存所在屋里地址 !vtop 命令可以有两个参数,第一个参数是CR3 寄存器的值,第二个参数是要查询的虚拟地址是多少,比如 kd> !vtop 19001e0 7c80 ...

  5. 如何清除Windows共享登录的用户名密码

    打开cmd 1.[查看已记录的登录信息] net use 2.[清除记录] 得关掉你所有打开的samba之后再 net use * /del

  6. JMeter学习篇（一）：测试实例讲解

    1.JMeter的下载与安装 Jmeter官方下载地址:http://jmeter.apache.org/download_jmeter.cgi,下载jmeter是一个zip压缩包,解压后,直接运行a ...

  7. TFS中的账号和GIT中的账号

    有些公司使用TFS来进行git的管理,这个时候很多人没有区分TFS中的账号和GIT的账号的区别:TFS的账号和GIT账号是两套不同的体系,使用TFS管理GIT GIT是不需要账号密码,但是必须在win ...

  8. scip 练习2.20

    (define (same-parity x . z) (define (q? y) (= (remainder y ) )) (define (o? y) (= (remainder y ) )) ...

  9. HashMap和Hashtable有什么区别

    HashMap和Hashtable都实现了Map接口,因此很多特性非常相似.但是,他们有以下不同点: HashMap允许键和值是null,而Hashtable不允许键或者值是null. Hashtab ...

  10. vue 学习三 v-model 表单绑定输入 以及修饰符的用处

    v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...