<!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. 两行代码实现微信小程序联系人sidebar

    话不多说,先给你们看看核心数据和结构: 一.数据: city的json array,letter的array (city的json array里的首字母是我手工放置进去的,你也可以通过for循环获得c ...

  2. XAF-UI元素概述

    XAF框架会根据业务模型自动生成默认的UI.一般来说,您可以使用默认的用户界面,但如果它不符合您的要求,您可以自定义它.要做到这一点,你应该知道UI是由哪些元素组成的,以及你可以自定义什么元素,以实现 ...

  3. java基础练习 3

    import java.util.Scanner; public class Third { /*计算字符串中子串出现的次数 (5 分数)*/ public static void main(Stri ...

  4. 关于 CentOS 自启动（服务、脚本）

    /etc/init.d /etc/rc.local 其实是软连接,所以,实际上看 /etc/rc.d/ 这个文件夹就好了 rc.local 是自启动脚本 正常情况下,用户自定义的服务在 init.d ...

  5. 数据结构之Heap (Java)

    Heap简介 Heap译为“堆”,是一种特殊的树形数据结构,它满足所有堆的特性:父节点的值大于等于子节点的值(max heap),或者小于等于子节点的值(min heap).对于max heap 根节 ...

  6. Linux 编译安装 源代码

    编译安装 源代码包的安装一般为下载软件源代码,然后编译安装. 常见的C程序软件的安装步骤是 configure, make, make install三部曲,大致是下面这样操作: 首先得安装gcc.m ...

  7. php学习笔记——语言切换

    现在的网站很多都可以实现多语言,于是记录一下多语言的实例. 方法一:通过将所有显示在页面的字段放在一个message文件里面来实现 思路如下图: test代码: main.php: <?php ...

  8. Spark Wordcount

    1.Wordcount.scala(本地模式) package com.Mars.spark import org.apache.spark.{SparkConf, SparkContext} /** ...

  9. SAP HANA中创建分析权限(Analytic Privilege)

    Demo Instruction: 假定CustomerID > 100的为VIP客户,我们的权限设置为只显示VIP客户 所使用的Attribute View: ATTR_CUSTOMER_FU ...

  10. Ubuntu14.04安装PHP5

    因为任务需要在Ubuntu14.04的server版本下安装PHP5,所以总结一下   使用root进行安装  要么在前面加上sudo进行安装. apt-get install php5-cgi ap ...