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

需要引入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. Objective - C 之类目

    一.类目(category):为已有的类(可以是系统类,也可以是自定义类)添加公有的新的方法: 例如:为系统已有的NSString类添加一个比较字符串大小的方法 1.创建过程: 2.NSString ...

  2. eclipse生成jar包 注意事项！

    原文转自:http://www.cnblogs.com/zhangfei/archive/2013/01/22/2871075.html 第一:普通类导出jar包,我说的普通类就是指此类包含main方 ...

  3. node.js入门(一)

    NodeJS是一个使用了Google高性能V8引擎的服务器端JavaScript实现.它提供了一个(几乎)完全非阻塞I/O栈,与JavaScript提供的闭包和匿名函数相结合,使之成为编写高吞吐 量网 ...

  4. this.AcceptButton = button1的用法：

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. ConcurrentHashMap原理分析（1.7与1.8）-put和 get 需要执行两次Hash

    ConcurrentHashMap 与HashMap和Hashtable 最大的不同在于:put和 get 两次Hash到达指定的HashEntry,第一次hash到达Segment,第二次到达Seg ...

  6. apache server-status配置

    引言 自己配置LAMP服务器时(xwamp),获取状态信息出现错误: You don't have permission to access /server-status on this server ...

  7. 第120天：移动端-Bootstrap基本使用方法

    一.Bootstrap使用 1.搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...

  8. 洛谷 P4116 Qtree3

    Qtree系列第三题 我是题面 读完题大概不难判断是一道树剖的题 这道题的关键是记录两种状态,以及黑点的序号(不是编号) 线段树啊当然 定义两个变量v,f,v表示距离根节点最近的黑点,默认-1,f则表 ...

  9. DP——P2300 合并神犇

    题目背景 loidc来到了NOI的赛场上,他在那里看到了好多神犇. 题目描述 神犇们现在正排成一排在刷题.每个神犇都有一个能力值p[i].loidc认为坐在附近的金牌爷能力参差不齐非常难受.于是loi ...

  10. Python下json中文乱码解决办法

    json.dumps在默认情况下,对于非ascii字符生成的是相对应的字符编码,而非原始字符,只需要 #coding=utf8 import json js = json.loads('{" ...