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

需要引入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. python获取前几天的时间

    days的参数就是你想获取前多少天的数据,如果是昨天的话,则days=1 import datetime today=datetime.date.today() oneday=datetime.tim ...

  2. 操作系统作业一——仿CMD

    实验一.CMD实验 2014商软2  卓宇靖  4238 一.        实验目的 (1)掌握命令解释程序的原理: (2)掌握简单的DOS调用方法: (3)掌握C语言编程初步. 二.        ...

  3. maven将依赖打入jar包

    将 依赖打入jar包,由于maven管理了所有的依赖,所以将项目的代码和依赖打成一个包对它来说是顺理成章的功能.maven的这个功能之前就用过,但这 次使用时忘了细节,只记得用maven的assemb ...

  4. 31. Ubuntu15.04系统中如何启用、禁用客人会话

    https://jingyan.baidu.com/article/046a7b3edf9639f9c27fa995.html 31. Ubuntu15.04系统中如何启用.禁用客人会话 听语音 | ...

  5. (转)Elasticsearch search-guard 插件部署

    我之前写了ELK+shield的部署文档,由于shield是商业收费的,很多人都推崇开源项目search-guard来做ELK的安全组件,准确来说是elasticsearch的安全组件.search- ...

  6. $(document).click() 在苹果手机上不能正常运行解决方案

    本来是如下一段跳转代码,发现在安卓和微信开发者工具上都能正常运行,但是苹果手机就不行了. $(document).on('click', '.url', function(){ location.hr ...

  7. django的第一个问题

    /usr/local/lib/python2.7/dist-packages/allauth/account/utils.py in setup_user_email, line 258 /usr/l ...

  8. Android性能测试工具APT

    APT源码地址:https://code.csdn.net/Tencent/apt APT,Android Performance Testing Tools,适用于开发自测和定位性能瓶颈,帮助测试人 ...

  9. Android 混淆签名打包

    1.混淆文件 proguard-rules.pro # Add project specific ProGuard rules here. # By default, the flags in thi ...

  10. 卸载iptables 小心了！！怎么关闭和卸载iptables

    千万千万不要使用下面的命令卸载iptables yum remove iptables 这样操作会卸载掉很多系统必要的组件,那就开不了机了,链接不上了.切记切记. 如果想永远停用,使用以下命令即可: ...