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

需要引入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. MySQL 基于mysqldump备份工具实战演练

    前言: 细节提示:先执行 show global variables like 'log_bin';看看log_bin的值,如果服务器变量log_bin的值为OFF,需要修改my.cnf配置文件,将l ...

  2. 多tab点击切换

    现在来一个小练习,就是用js实现多tab之间的切换: <body> <ul id="tab"> <li id="tab1"> ...

  3. python/django将mysql查询结果转换为字典组

    使用python查询mysql数据库的时候,默认查询结果没有返回表字段名称,不方便使用.为了方便使用一般会选择将查询结果加上字段名称以字典组的方式返回查询结果. 实现如下: def dict_fetc ...

  4. TP中if标签

    if标签 If标签如果php中if语句的作用,if是用于流程控制的. 在ThinkPHP中if标签也是用于流程控制的. If标签的语法格式: <if condition=’条件表达式’> ...

  5. Mysql中关键词执行顺序

    MySQL的语句执行顺序 MySQL的语句一共分为11步,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入,只是这些虚拟的表对 ...

  6. 主流的RPC框架有哪些

    RPC是远程过程调用的简称,广泛应用在大规模分布式应用中,作用是有助于系统的垂直拆分,使系统更易拓展.Java中的RPC框架比较多,各有特色,广泛使用的有RMI.Hessian.Dubbo等.RPC还 ...

  7. [OS] 系统调用

  8. Jquery简单实现Datepicker

    cshtml: <input type="text" id="purchaseDate" name="PurchaseDate" va ...

  9. Vue 取出记录数后，页面显示刚开始显示部分，点击更多显示全部

    实例的实现,是使用computed计算属性,还有对数组使用.slice函数,不改变原数据对象. <div id="app"> <ul> <li v-f ...

  10. BZOJ 2152 聪聪可可(树形DP)

    给出一颗n个点带边权的树(n<=20000),求随机选择两个点,使得它们之间的路径边权是3的倍数的概率是多少. 首先总的对数是n*n,那么只需要统计路径边权是3的倍数的点对数量就行了. 考虑将无 ...