恩，不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭，点击这个小火箭就可以慢慢回到页面顶部，闲的没事，自己搞了一下

需要引入jquery

代码和布局都很简单

<!DOCTYPE HTML>

<html>

    <head>

        <style>

            #content{

                height: 2000px ;

                width: 960px ;

                margin: 0 auto ;

                background-color: blue ;

            }

            #rocket{

                width: 50px ;

                height: 50px ;

                position: fixed;

                right: 10px ;

                bottom: 10px ;

                display: none;

            }

            #rocket img{

                width: 100%;

                height: 100%;

            }

        </style>

        <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>

    </head>

    <body>

        <div id="layout">

            <div id="content"></div>

            <div id="rocket"><img src="./img/rocket.png"></div>

        </div>

    </body>

    <script type="text/javascript">
$(function(){
　　initRocket() ;
):
//初始化火箭
function initRocket(){
  if(document.body.scrollTop!=0){
    $("#rocket").show();
    $('#rocket').unbind().bind('click', up);
  }
  document.addEventListener("mousewheel",function(){
    if(document.body.scrollTop!=0)
    {
      $("body").stop();
      $('#rocket').unbind().bind('click',up);
      $("#rocket").css('display', 'block');
    }else{
      $("#rocket").css('display', 'none');
    }
  },false) ;
  function up(){
    $("body").animate({scrollTop:"0"},500,function(){
      $("#rocket").css('display', 'none');
      $('#rocket').bind('click',up);
    });
    $('#rocket').unbind("click");
  }
}
</script> </html>

主要思路是这样的，利用position：fixed将我们的小火箭固定在屏幕的右下角，先把display设置成none来隐藏小火箭，因为页面在顶部的时候我们不需要它~

            #rocket{

                width: 50px ;

                height: 50px ;

                position: fixed;

                right: 10px ;

                bottom: 10px ;

                display: none;

            }

好的，然后我们来监听鼠标的滚动事件（mousewheel），添加一个判断如果页面不在顶部就使小火箭现形，并为其添加click事件。这里注意要把body的动画stop掉，因为如果在火箭上升的时候用户滑动滚轮就表明用户想停在那里，还有就是rocket的事件要先unbind在bind，不然会导致多次添加事件。

  document.addEventListener("mousewheel",function(){
    if(document.body.scrollTop!=0)
    {
      $("body").stop();
      $('#rocket').unbind().bind('click',up);
      $("#rocket").css('display', 'block');
    }else{
      $("#rocket").css('display', 'none');
    }
  },false) ;

小火箭的点击事件是执行一个body的scrollTop属性的动画，因为body的crollTop就是我们的可视区域到页面顶部的距离。一开始执行我们就把它的click事件就unbind掉，不然点击又会执行，造成多次执行，还有就是在动画结束的回调函数中我们将小火箭再次隐藏并绑定点击事件。

        function up(){

            $("body").animate({scrollTop:"0"},2000,function(){

                $("#rocket").css('display', 'none');

                $('#rocket').bind('click',up);

            });

            $('#rocket').unbind("click");

        }

大概就是这样，很简单吧~

用jquery实现小火箭到页面顶部的效果的更多相关文章

  1. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  2. jquery实现点击上移到顶部功能(转)

    ---恢复内容开始--- 本文转载自W3CPLUS, jQuery制作go to top按钮 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人了,但自己就是做不出这样的效果.后来在 ...

  3. Android简易实战教程--第十话《模仿腾讯手机助手小火箭发射详解》

    之前对系统自带的土司的源码做了简要分析,见博客:点击打开链接 这一篇给一个小案例,自定义土司,模拟腾讯卫士的小火箭发射.如果想要迅速看懂代码,建议先去看一下上篇介绍点击打开链接 首先,定义一个服务,在 ...

  4. jQuery判断元素离页面顶部的高度

    <script language="javascript" type="text/javascript"> jQuery(document).rea ...

  5. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  6. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  7. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

  8. 代码： 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  9. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

随机推荐

  1. 结对编程--fault,error,failure的程序设计

    一．结对编程内容: 1.不能触发Fault. 2.触发Fault,但是不触发Error. 3.触发Error,但不触发Failure. 二．结对编程人员 1.周浩,周宗耀 2.结对截图: 三．结对项目 ...

  2. Monkey自动化测试

    Monkey简介 语法参数 实际应用 一.Monkey简介 1.什么是Monkey? 基于健壮性.稳定性的考虑:如果将一个应用交给一个人长时间不停地乱点乱按,程序会怎么样? 有时候运行相同系列的测试, ...

  3. 【前端学习笔记】函数定义、函数调用、this

    函数定义的三种方式与特点: 1.函数声明:(特点:会被前置:重复定义函数时,最后一次定义有效.) 2.函数表达式: 3.函数实例化:(特点:只能访问本地作用域与全局作用域!!!) /* 对象实例化定义 ...

  4. UVA11625_Lines of Containers

    题意很简单,给你一个n*m的矩阵,现在问你这个矩阵能否变为标准矩阵(即数字从小到大),如果能最少需要几步呢? 其实是个赤果果的水题.记得暑假安叔也出过一个类似的题目,那个好像是在codeforces上 ...

  5. hdu 6435 CSGO（最大曼哈顿距离）

    题目链接 Problem Description You are playing CSGO. There are n Main Weapons and m Secondary Weapons in C ...

  6. Spring Boot系列教程六：日志输出配置log4j2

    一.前言  spring boot支持的日志框架有,logback,Log4j2,Log4j和Java Util  Logging,默认使用的是logback日志框架,笔者一直在使用log4j2,并且 ...

  7. C++ 指针[转+原创]

    要搞清一个指针需要搞清指针的四方面的内容:指针的类型,指针所指向的类型,指针的值或者叫指针所指向的内存区,还有指针本身所占据的内存区. 指针的类型 从语法的角度看,你只要把指针声明语句里的指针名字去掉 ...

  8. bzoj3251: 树上三角形（思维题）

    神tmWA了8发调了20min才发现输出没回车T T... 首先考虑一段什么样的序列才会是N... 显然最长的形式就是斐波那契,前两数之和等于第三数之和,这样就无法组成三角形并且序列最长.可以发现在i ...

  9. 【学习笔记】ac自动机&fail树

    定义 解决文本串和多个模式串匹配的问题: 本质是由多个模式串形成的一个字典树,由tie的意义知道:trie上的每一个节点都是一个模式串的前缀: 在trie上加入fail边,一个节点fail边指向这个节 ...

  10. Linux基础--------centos7 安装python3（yum安装）

    #安装sqlite-devel yum -y install sqlite-devel #安装依赖 yum -y install make zlib zlib-devel gcc-c++ libtoo ...