<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style type="text/css">
         *{
             margin: 0;
             padding: 0;
         }
         .wrap{
             height: 2000px;
         }
         .gotop{
             display: block;
             width: 32px;
             height: 32px;
             background-color: red;
             text-align: center;
             text-decoration: none;
             font-size: 14px;
             font-weight: bold;
             color: white;
             line-height: 32px;
             position: fixed;
             right:50px;
             bottom:50px;
             opacity: 0;
             /*top: 500px;*/
         }
    </style>
</head>
<body>
      <div class="wrap">
             <a href="###" class="gotop">TOP</a>
      </div>
      <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
      <script type="text/javascript">
        $(function(){
                 // 当滚动条滚动大于200时出现，未大于，消失
                 $(window).scroll(function(){
                     if($(document).scrollTop()<200){
                         // alert("kk");
                         $(".gotop").stop().animate({
                              
                                  opacity: 0
                                 
                         },1000)
                     }
                     else{
                         $(".gotop").show().stop().animate({
                                  
                                  opacity: 1
                                 
                         },1000)
                     }
                })
             // 返回顶部
             $(".gotop").on("click",function(){
                   $("html body").animate({
                          scrollTop:0
                   },1000)
             })
        })
      </script>
</body>
</html>

Jquery 返回顶部的更多相关文章

  1. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  2. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  3. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  4. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  5. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  6. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  7. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  8. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

  9. jQuery返回顶部代码

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

随机推荐

  1. Android插件简介

    /** * @actor Steffen.D * @time 2015.02.06 * @blog http://www.cnblogs.com/steffen */ Android插件简介 Andr ...

  2. Linux历史上线程的3种实现模型

    一.概述                                                   这里以Linux为例.Linux历史上,最开始使用的线程是LinuxThreads,但Li ...

  3. Python爬虫学习——使用Cookie登录新浪微博

    1.首先在浏览器中进入WAP版微博的网址,因为手机版微博的内容较为简洁,方便后续使用正则表达式或者beautifulSoup等工具对所需要内容进行过滤 https://login.weibo.cn/l ...

  4. XAF-列表视图数据访问模式

    本主题介绍有关列表视图如何提供数据访问的几种方式.请注意,选择正确的方式对于实现XAF应用程序的最佳性能至关重要.    数据访问模式概述   在模型编辑器中,通过 视图-> <ListV ...

  5. Ubuntu16.04 server下配置MySQL，并开启远程连接

    背景 最近正在学nodejs,想到曾经有台云服务器,但是很久不用了,由于怕麻烦,一股脑的把云主机重装了个Ubuntu系统,于是配置MySQL成了配置服务中的一个环节(node用不用MySQL不管,主要 ...

  6. C++ unordered_map 在key为string类型和char*类型时测试时间性能差异

    测试系统liunx centos6.5 代码如下 #include <string.h> #include <sstream> #include <list> #i ...

  7. 【USACO】接住苹果

    接住苹果奶牛喜欢吃苹果.约翰有两棵苹果树,有 N 只苹果会从树上陆续落下.如果掉苹果的时候,贝西在那棵树下,她就能接住苹果.贝西一开始在第一棵树下.在苹果掉落之前,她有足够的时间来回走动,但她很懒,最 ...

  8. SpringMVC实现注解式权限验证（转）

    SpringMVC学习系列(9) 之 实现注解式权限验证   对大部分系统来说都需要权限管理来决定不同用户可以看到哪些内容,那么如何在Spring MVC中实现权限验证呢?当然我们可以继续使用serv ...

  9. Ansible安装配置

    Ansible工具的安装与配置 Ansible基于SSH,不需要在远程端安装任何软件,只需要在管理端安装ansible及其组件即可. Ansible使用前提是已配置ssh密钥免登陆. 一.安装组件: ...

  10. python第五天

    反射 hasattr,getattr class Foo: static_name = 'nba' def __init__(self): self.name = 'alex' def show(se ...