<!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. java.lang.Double.byteValue() 方法

    java.lang.Double.byteValue() 方法(通过转换成一个字节)返回此Double为一个字节的值. 声明 以下是java.lang.Double.byteValue()方法的声明 ...

  2. Bootstrap入门及其常用内置实现

    BootStrap是一个专门做页面的 1.BS是基于HTML CSS JS 的一个前端框架(半成品) 2.预定义了一套CSS样式与JQurey实现 3.BS和Validation类似,都是JQ的插件, ...

  3. 并发编程之CAS（二）

    更多Android架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从以下几个内容来阐述CAS: [CAS原理] [CAS带来的ABA问题] 一 ...

  4. 巧用border属性

    border是常见的css2属性,大家的印象中是不是只是作为边框使用,如下所示: 事实上border,还可以当做图标去使用 我们先来看段代码 <style> .div1{ margin: ...

  5. [BOI2009]Radio Transmission 无线传输

    题目描述 给你一个字符串,它是由某个字符串不断自我连接形成的. 但是这个字符串是不确定的,现在只想知道它的最短长度是多少. 输入输出格式 输入格式: 第一行给出字符串的长度,1 < L ≤ 1, ...

  6. 访问nginx时验证密码

    只允许1.2.3.4这个IP访问我们的站点,拒绝所有其他IP的访问. server { listen 80; server_name www.example.com; satisfy any; all ...

  7. C语言static和局部变量

    #include <stdio.h> void test(); int main() { /************************************************ ...

  8. Center OS 部署Tomcat服务

    一.下载tomcat tomcat官网下载软件包,官网:https://tomcat.apache.org/ 点击download,进入下载页面,下载如下版本: 下载完成后用ftp上传到服务器,SSH ...

  9. VS2012在win7 64位机中x86和x64下基本类型的占用空间大小（转）

    VS2012在win7 64位机中x86和x64下基本类型的占用空间大小 #include "stdafx.h" #include <windows.h> int _t ...

  10. 类 __init__的注意事项

    class Dog():  class类 后面的ClassName类名第一个字母一定要大写. def __init__(self,name,age):    注意init前后是英文格式下,前后都是两道 ...