小火箭返回顶部案例

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. Springboot | Failed to execute goal org.springframework.boot:spring-boot-maven-plugin

    案例 今天搭建spring boot 环境时,使用mvn install ,出现Failed to execute goal org.springframework.boot:spring-boot- ...

  2. Shell case语法结构解析

    case ... esac 与其他语言中的 switch ... case 语句类似,是一种多分枝选择结构,每个 case 分支用右圆括号开始,用两个分号 ;; 表示 break,即执行结束,跳出整个 ...

  3. <img>和background-img区别

    1. 是否占位 background-image是背景图片,是css的一个样式,不占位 <img />是一个块状元素,它是一个图片,是html的一个标签,占位 2.否可操作 backgro ...

  4. Qt qApp

    qApp A global pointer referring to the unique application object. It is equivalent to the pointer re ...

  5. linux入门系列9--用户管理及文件权限控制

    ​ 前面文章分享了Linux下常用命令以及Shell编程相关知识,本节继续学习Linux用户管理及文件权限控制. ​ Linux是多用户多任务操作系统,具有很好的稳定性和安全性.既然是多用户,那就意味 ...

  6. C++ traits技法的一点理解

    为了更好的理解traits技法.我们一步一步的深入.先从实际写代码的过程中我们遇到诸如下面伪码说起. template< typename T,typename B> void (T a, ...

  7. 变量引用的错误：UnboundLocalError: local variable 'range' referenced before assignment

    class Battery(): """一次模拟电瓶汽车的简单尝试""" def __init__(self,battery_size = ...

  8. POJ_1979_dfs

    题目描述: 每组数据给你一张字符的图,'@'代表起点,'.'代表可走的路,'#'代表墙,求从起点出发,可到达的位置的数量,包括起点. 思路: dfs基础题,从起始点开始,每一次所在的点,只要不出界并且 ...

  9. HDU_1176_DP

    http://acm.hdu.edu.cn/showproblem.php?pid=1176 简单dp,转换后跟上一题数塔一样,注意每秒只能移动一格,还有在边缘的情况. #include<ios ...

  10. java中的四种监听类用法

    在此列举四种方法: 自身类实现ActionListener接口,作为事件监听器 通过匿名类处理 通过内部类处理 通过外部类处理 下面依次介绍: 第一种:自身类实现ActionListener接口,作为 ...