小火箭返回顶部案例

1. 滚动页面，当页面距离顶部超出1000px，显示小火箭。

封装在scroll函数里，当前页面距离顶部为$(window).scrollTop >=1000

小火箭显示和隐藏用fadeIn和fadeOut

      //当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏

      $(window).scroll(function () {

        if ($(window).scrollTop() >= 1000) {

          $(".actGotop").stop().fadeIn(1000);

        } else {

          $(".actGotop").stop().fadeOut(1000);

        }

      })

    });

2. 当小火箭出现后，点击小火箭，返回到页面顶部。

在外面出册点击事件，获取页面，html或者body, 返回用animate动画函数，到顶部即scrollTop为0，时间可以设置

    $(".actGotop").click(function () {

      $("html,body").stop().animate({ scrollTop: 0 }, 1000);

    });

3. 如果要让小火箭点击后，直接回到顶部，可以只设置$(window).scrollTop(0)，既可

    $(".actGotop").click(function () {

      //$("html,body").stop().animate({ scrollTop: 0 }, 1000);

      //scrollTop为0

      $(window).scrollTop(0);

    });

整体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    body {

      height: 8000px;

    }

    a {

      color: #FFF;

    }

    .actGotop {

      position: fixed;

      bottom: 50px;

      right: 50px;

      width: 150px;

      height: 195px;

      display: none;

      z-index: 100;

    }

    .actGotop a,

    .actGotop a:link {

      width: 150px;

      height: 195px;

      display: inline-block;

      background: url(images/gotop.png) no-repeat;

      outline: none;

    }

    .actGotop a:hover {

      width: 150px;

      height: 195px;

      background: url(images/gotop.gif) no-repeat;

      outline: none;

    }

  </style>

</head>

<body>

  <!-- 返回顶部小火箭 -->

  <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏

      $(window).scroll(function () {

        if ($(window).scrollTop() >= 1000) {

          $(".actGotop").stop().fadeIn(500);

        } else {

          $(".actGotop").stop().fadeOut(500);

        }

      })

    });

    //在外面注册

    $(".actGotop").click(function () {

      $("html,body").stop().animate({ scrollTop: 0 }, 1000);

      //scrollTop为0

      // $(window).scrollTop(0);

    });

  </script>

</body>

</html>

jQuery---小火箭返回顶部案例的更多相关文章

  1. 第50天：scrollTo小火箭返回顶部

    scrollTo(x,y)//可把内容滚动到指定的坐标scrollTo(xpos,ypos)//x,y值必需 1.固定导航栏 <!DOCTYPE html> <html lang=& ...

  2. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

  3. JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

    点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. jQuery中页面返回顶部的方法总结

    当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...

  5. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  6. javascript 缓动返回顶部案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 小程序返回顶部top滚动

    wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...

  8. jQuery实现返回顶部

    由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...

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

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

随机推荐

  1. JVM性能分析 | 一次生产系统Full GC问题分析与排查总结

    一次生产系统Full GC问题分析与排查总结 背景 最近某线上业务系统生产环境频频CPU使用率过低,频繁告警,通过重启可以缓解,但是过了一段时间又会继续预警,线上两个服务节点相继出现CPU资源紧张,导 ...

  2. java字符编码-Unicode编码问题刨根究底

    博客搬家: java字符编码问题 前段时间在读<java核心技术卷一>,遇到一些名词:码点.代码单元等,其实字面意思不难理解,解释如下 码点(code point):Unicode编码表中 ...

  3. Python 进行目标检测

    一.前言 从学单片机开始鼓捣C语言,到现在为了学CV鼓捣Python,期间在CSDN.简书.博客园和github这些地方得到了很多帮助,所以也想把自己做的一些小东西分享给大家,希望能帮助到别人.记录人 ...

  4. 5年从DBA到运维架构总监 — 做对了什么

    本文来自宝宝树运维总监刘秋岐的分享.随着MySQL的不断成熟,逐渐被用于更多大规模的网站和应用了,比如说当前最火的Facebook.淘宝.阿里.兰亭集势.宝宝树这样的大型的网站都在使用MySQL数据库 ...

  5. centos下利用phantomjs来完成网站页面快照截图

    最近研究了下phantomjs,感觉还是非常不错的. 首先到官网下载一个源码包 http://phantomjs.org/download.html 点击源码包下载如图: 然后在linux下将必要的一 ...

  6. 分组密码CBC加密缺陷

    title: 分组密码CBC加密缺陷 date: 2017-05-15 10:04:47 tags: ["密码学"] --- 关于密码学的种种漏洞以及利用网上也有不少,但是比较零散 ...

  7. The related functions and attributes for managing attributes - 操作属性的重要属性和函数

    特性 property 都是类属性(静态变量),但是特性管理的其实是实例属性的存取, ****** 回顾 -'类方法' classmethod 和 '静态方法' staticmethod 皆可以访问类 ...

  8. [Effective Java 读书笔记] 第8章 通用程序设计

    本章主要讲了以下几条基本的JAVA编程原则: 1.将局部变量的作用域控制在最小,在使用时才定义 2.for-each优于for循环 有三个例外(1,2点主旨就是,for each只能用于读取,不能用于 ...

  9. iptbales 允许访问vsftp

    1.允许20 21 端口iptables -I INPUT -p tcp -m multiport --dport 20,21 -j ACCEPT 2.允许关联包通过iptables -A INPUT ...

  10. centos7.5下yum安装php-5.6.40（LNMP环境）

    cd /etc/yum.repos.d/ yum -y install epel-release #<===安装centos7下php5.6的epel和remi源 rpm -ivh http:/ ...