小火箭返回顶部案例

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. kaggle实战之 bag of words meet bag of poopcorn

    由于编辑器总是崩溃,我只能直接把代码贴上了. import numpy #first step import pandas as pd import numpy as np # Read data f ...

  2. oracle11G 已开启监听，但远程连接依旧无监听解决过程

    1.连接数据库显示无监听程序,首先查看服务器的oracle监听服务是否开启,服务名称:OracleOraDb11g_home1TNSListener(具体环境中可能不完全一样,但是认准TNSListe ...

  3. 技术派-如果编译提示winnt.h(222):error C2146错误

    如果编译的时候,出现如下错误: \Microsoft Studio 8\VC\PlatformSDK\include\winnt.h(222):error C2146: 语法错误:缺少“:”(在标识符 ...

  4. Android触摸事件传递机制，这一篇就够了

    整个触摸事件牵涉到的是,Activity,View,ViewGroup三者的传递机制. 这个触摸事件就是从外层往内层一层层的传递. 整个传递机制,分为3个步骤:分发,拦截,和消费. 1. 触摸事件的类 ...

  5. 五、Shell运算

    整数值运算 使用expr命令:只能做整数运算,默认返回计算结果 格式: expr 整数1 运算符 整数2 ... 整数值可以有变量提供,直接给出运算结果 + 加法 expr 43 + 21 .expr ...

  6. Tarjan算法——强连通、双连通、割点、桥

    Tarjan算法 概念区分 有向图 强连通:在有向图\(G\)中,如果两个顶点\(u, v\ (u \neq v)\)间有一条从\(u\)到\(v\)的有向路径,同时还有一条从\(v\)到\(u\)的 ...

  7. Codeforces 1156E Special Segments of Permutation(启发式合并)

    题意: 给一个n的排列,求满足a[l]+a[r]=max(l,r)的(l,r)对数,max(l,r)指的是l到r之间的最大a[p] n<=2e5 思路: 先用单调栈处理出每个点能扩展的l[i], ...

  8. oracle面试基础

    . 对于一个存在系统性能的系统,说出你的诊断处理思路 ). 做statspack收集系统相关信息 了解系统大致情况/确定是否存在参数设置不合适的地方/查看top event/查看top sql等 ). ...

  9. 基于 Google-S2 的地理相册服务实现及应用

    马蜂窝技术原创内容,更多干货请关注公众号:mfwtech 随着智能手机存储容量的增大,以及相册备份技术的普及,我们可以随时随地用手机影像记录生活,在手机中存储几千张甚至上万张照片已经是很常见的事情.但 ...

  10. 如何在kalilinux上安装docker

    如何在kalilinux上安装docker 0X00安装背景 在windows上安装docker使用未果后,便决定在kalilinux上安装一个docker 0X01安装步骤 分别在linux终端执行 ...