小火箭返回顶部案例

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. Mybatis基础（二）

    Mybatis连接池 Mybatis连接池提供了三种配置方式,配置的位置在SqlMapConfig.xml的dataSource标签中,其type属性就是配置连接池的种类.type的可取值 1.POO ...

  2. 用Java实现一个简单的DBMS(总结)

    时间:2020/1/16 写这个DBMS(说DBMS夸张了,应该是一个控制台程序)的起因是数据库实践老师布置的一个大作业,先贴上GitHub地址: https://github.com/machi12 ...

  3. IntelliJ IDEA 2019.3 安装+永久破解[Windows]

    IntelliJ IDEA 2019的最后一个版本发布了,听说大幅优化了运行速度,本人实测启动速度确实比以前快不少,所以赶紧安排上新版本IDEA的破解教程 系统环境:Win10 LTSC(1809) ...

  4. The import java.io cannot be resolved (类库无法解析的问题解决 )

    导入一个新项目后常会出现 The import java.io cannot be resolved String cannot be resolved to a type 其原因在于没有导入需要的包 ...

  5. java工具类方法

    1.生成16位数字(当时日期时间加随机两位数) public static String getNo16() { String getNo = getNo(); return getNo.substr ...

  6. 编写SQL语句（快速回顾）

    注:源自于<Java程序员面试秘笈>! 1.创建数据库MYDB create database MYDB 2.创建学生表student (sno,sname,ssex,sage,sclas ...

  7. Leetcode题解 - 部分中等难度算法题解（56、957、825、781、1324、816）

    957. N 天后的牢房 思路: 模拟变换,当N天结合后返回 => 当N非常大的时候,超时 => 一般N很大的时候,这种题目必然存在循环,所以记录找过的状态,一旦出现已经访问过的状态可立即 ...

  8. [redis读书笔记] 第一部分 数据结构与对象 对象特性

    一 类型检查和多态    类型检查,即有的命令是只针对特定类型的,如果类型不对,就会报错,此处的类型,是指的键类型,即robj.type.下面为有类型检查的命令: 对于某一种类型,redis下底层的实 ...

  9. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. [Python]JavaScript VS Python 函数

    js function 相当于 python def js语句结束符; python为缩进符 JavaScript /*定义*/ function 函数名(参数1,参数2,参数3...){ 函数体 } ...