<!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. vue 笔记，ref 及 $event 事件对象

    本文仅用作简单记录 ref : 在标签上添加 ref = “name” ,表示获取当前元素节点 <input type="text" ref="info" ...

  2. docker container 的操作

    删除所有退出的容器 docker container rm $(docker ps -aq)

  3. 一键抓取Android的Locat Log

    很多小伙伴在做App测试时,一遇到Cash,开发同学最常说的一句话,就是抓下Locat日志,很多小伙伴一听到这个抓取日志就会觉得有点烦. ​主要有2点: ​    ​    ​1.是这个bug可能不好 ...

  4. Flatty Shadow图标自动产生器——在线生成各种扁平化 ICON

    在扁平化风格越来越流行的今天,网页.软件界面和图标的设计大都采用了扁平化风格.特别是扁平化图标的设计,摒弃了一切3D元素的设计,阴影.纹理.透视神马的统统不要,让图标简洁高效,富有现代感. 今天给大家 ...

  5. mac 如何卸载node和npm采坑之旅

    因为本地npm一直报错,所以决定直接卸载node和npm,重新装.第一次卸载,具体咱也不会呀!能咋整呢,百度呗 茫茫百度中各种找呀,找到一个转载最多的方法 sudo npm uninstall npm ...

  6. 关于mysql的权限的问题

    昨天因为同学的mysql数据库不知道做了什么操作,从而导致root用户无法使用了 具体是使用root用户不需要密码 进去只能看 看到 infomation_schema 表 ,感觉root权限丢失了 ...

  7. lsm和lkm模块

    使用LSM Hook框架进行内核安全审计.元数据捕获,安全人员只需要按照既定的调用规范编写LKM模块,并加载进Linux内核,而不需要对system call lookup表进行任何修改 https: ...

  8. IDA静态编译之sub

    int __thiscall sub_10009800(const wchar_t *this, int a2, int a3, HKEY hKey){ } 说明:__thiscall  dll内子函 ...

  9. Simple example of use of __setstate__ and __getstate__

    class Foo(object): def __init__(self, val=2): self.val = val def __getstate__(self): print ("I' ...

  10. [JZOJ6355] 【NOIP2019模拟】普 24/100

    题目 题目大意 给你一个序列,对于所有\(k\in [1,n]\),求长度为\(k\)的子序列的最大权值,权值为\(a_1-a_2+a_3-...\pm a_k\) 思考历程 这题显然可以背包对吧-- ...