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

需要引入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. 【第二周】scrum站立会议

    1.站立会议:敏捷软件开发方法论Scrum的相关技术之一,是scrum的最佳实践 2.具体形式:每天的同一时间让团队成员面对面站立交流工作进展 3.功能: (1)让团队所有人都相互知道彼此的进展,了解 ...

  2. 1st 本周工作量及进度统计

    1. 项目:英文文章词频统计 项目类型:个人项目 项目完成情况:已完成 项目日期:2016.9.6 C(类别) C(内容) S(开始时间) ST(结束时间) I(耽误时间) △(实际时间) 分析 需求 ...

  3. 使用Log4在测试过程中打印执行日志 及配置log4j.properties！

    http://zengxiantao.iteye.com/blog/1881706 1.环境配置:到网上下载log4j-1.2.17.jar包!完后 添加到 项目的build path 中即可! 2. ...

  4. IDEA配置Java Web项目

    IDEA部署maven tomcat的java web项目的关键配置:

  5. linux 下svn忽略文件

    假设想忽略文件temp 1. cd到temp所在的目录下: 2. svn propedit svn:ignore . 注意:请别漏掉最后的点(.表示当前目录),如果报错请看下面 3. 打开的文件就是忽 ...

  6. spring cloud & dubbo

    区别 来源(背景): Dubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿里巴巴集团的各成员站点. Spring Cloud,从命名我们就可以知道,它是Spring Source的产物,Spr ...

  7. shell脚本如何获取当前时间

    在shell脚本里常常需要获取系统时间来处理某项操作,linux的系统时间在shell里是可以直接调用系统变量的如: 获取今天时期:`date +%Y%m%d` 或 `date +%F` 或 $(da ...

  8. LR安装No Background bmp defined in section General entry BGBmp的解决办法

    问题描述:我在win10装LR11总是报这个错误:No Background bmp defined in section "General" entry "BGBmp& ...

  9. Doves and bombs UVA - 10765（统计割顶所连接的连通块的数量）

    题意:给定一个n个点的连通的无向图,一个点的“鸽子值”定义为将它从图中删去后连通块的个数. 求对应的点 和 每个点的“鸽子值” 用一个数组在判断割顶的那个地方 累加标记一下所连接的连通块的数量即可 初 ...

  10. 【题解】JSOI2011分特产

    没sa可suo的,sui题一道…… #include <bits/stdc++.h> using namespace std; #define maxn 3000 #define mod ...