<!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. 剑指offer——62数组种数字出现的次数

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 题解: 我们想到异或运算的一个性质:任何一个数字异或它自己都等于0.也就是说,如果我们从头到尾依 ...

  2. 8.1_springboot2.x之Actuator应用监控

    1.监管端点测试 引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  3. wbinfo - 向winbind服务查询信息

    总览 SYNOPSIS wbinfo [-a user%password] [-c username] [-C groupname] [--domain domain] [-I ip] [-s sid ...

  4. API详解

  5. 【持续更新】leetcode算法-数组篇

    会在近期陆续地完成数组篇的整理,希望对找工作的小伙伴有所帮助.   1.Two Sum:两数相加为一固定值,求其下标.一次遍历数组,用一个hash表存储已经访问过的数及其下标,对于新访问的数value ...

  6. 了解linux web的监听工具

    zabbix cacti Nagios 本想安装的,但是安装需要一个 空的服务器,因为服务器已经有安装 LAMP,故没有去了解 尝试了 cacti ,因为本地环境版本问题,只能使用0.8.8a版本,并 ...

  7. linux crontab 计划任务编写

    在linux中启动crontab服务: /etc/init.d/crond start crontab的命令格式 crontab -l 显示当前的crontab 文件(默认编写的crontab文件会保 ...

  8. Atcoder arc092

    E-Both Sides Merger 给你一个序列,支持两种操作,直到序列中只有一个数时停下来,使得剩下数最大,并输出选数方案. 操作1:扔掉一个最前端或最后端的元素.操作2:选取一个不在边界上的元 ...

  9. Redis探索之路(一)：Redis简介

    一:NOSQL NotOnlySQL 反SQL运动,非关系型数据库(区别于Mysql关系型书库). 随着Web2.0兴起,“高性能”,“高并发”成为主流. NoSQL以key-value形式存储数据, ...

  10. python数据读取路径为啥要用双反斜杠?

    Window下python读取数据路径可以有三种表示方式: (1)'c:\\a.txt' ——>转义的方式.表示这里\\是一个普通\字符,不容易出错(2)r'c:\a.txt' ——>声明 ...