小火箭返回顶部案例

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. 小程序redio 样式

    小程序 radio 不写样式大概是这样的 数据为测试数据. 为了增加用户体验我们一下 美化后大概是这样的 给他设定头部.左边间距 ,和自身最小宽度 上代码: wxml: <radio-group ...

  2. 基于 HTML5 WebGL 的智慧城市（一）

    前言 中共中央.国务院在今年12月印发了<长江三角洲区域一体化发展规划纲要>(下文简称<纲要>),并发出通知,要求各地区各部门结合实际认真贯彻落实. <纲要>强调, ...

  3. 一次DB故障引起的反思和MySQL Operator选型

    前言 在一次数据库故障后,我们发现业务库会根据业务的等级会划分多个 MySQL 实例,许多业务库会同时属于一个 MySQL 实例,当一个库引发问题后整个实例的状态是不可控的.从而导致这个实例上的所有业 ...

  4. 死磕dtd(1)

    看到安卓开发里大量的xml文件和layout里的Android UI开始复习一下xml xml的校验规则依据dtd dtd里面大小写敏感.....查找了好久才发现这个问题 <?xml versi ...

  5. 《Python学习手册 第五版》 -第8章 列表与字典

    前面已经讲过数值类型(第5章)和字符串类型(第7章),本章继续其他数据类型的讲解:列表和字典 本章的核心内容 1.列表 1)什么是列表 2)基本列表操作 3)列表迭代和推导 4)索引.分片和矩阵 5) ...

  6. 【题解】P3373 【模板】线段树 2

    线段树解法 好丢脸,这个题做了一下午,调试了三个多小时...... 先讲讲解题思路 既然这里是线段树,就要用到lazy-tag.又有加法又有乘法的话,就要用到两个lazy-tag,分别用数组jia[] ...

  7. 使用sass语法生成自己的css的样式库

    前言 先说一下 sass 和 scss的区别 sass 是一种缩进语法(即没有花括号和分号,只使用换行 缩进的方式去区别子元素,PS:这是我个人的理解) scss 是css-like语法  (它的语法 ...

  8. docker device or resource busy

    docker-compose -f docker-compose.yml up -d  时候报错 device or resource busy 使用 docker-compose down 会导致一 ...

  9. php 安装 pdo_mysql

    首先要安装 mysql客户端 然后再安装php mysql 扩展 1.安装 mysql客户端 和 mysql开发包 使用yum安装mysql client 到mysql官网下载 yum文件  http ...

  10. CentOS7.3yum安装MariaDB报错[Errno 256]

    在yum安装MariaDB时出现下面这个错误提示,然后着手排查,先检查了/etc/yum.repo.d/下的配置文件,没有错误. failure: repodata/repomd.xml from m ...