js之jquery实现点击上移到顶部功能

我总结了几种方法，现在从简单到复杂依次看看几种实现效果的方法：

DEMO一：

这种效果是最原始的，也是最简单的。当页载入时，这个按钮就存在，并固定在页面的底部，页面垂直滚动条离顶部有一定的距离时，点击“点我回到页面顶部”按钮时，页面就会回到顶部。那就一起看看其实现过程吧：

//html
<div class="container">
    <div class="header"> 我是头部</div>
    <div class="content">我是主内容，高度是2500px</div>
    <div class="footer">我是在最底部</div>
    <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>
 </div>

为了更好看测试效果，我们给上面标签元素加上一定的样式：

//css
<style type="text/css">
   .container {
      width:980px;
      margin:0 auto;
      height:auto;
      min-height:100%;
      position:relative;
   }
   .content {
      height: 2500px;
      border: 1px solid red;
   }
   #goToTop {
      position: fixed;
      bottom: 20px;
      right: 10%;
   }
  #goToTop a {
      background: none repeat scroll 0 0 #f90;
    border: 1px solid #CCCCCC;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    color: #fff;
    font-size: 14px;
    padding: 22px 5px;
    text-decoration: none;
    text-shadow: 0 1px 0 #999;
    -webkit-text-shadow: 0 1px 0 #999;          
     }
 </style>

在<head></head>中加上jQuery的库：

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

（注：后面的例子都需要这个库，所以后面没有特殊说明的情况下，这个库都在head标签中存在。）
现在我们就给其加上一定的jQuery代码：

//js
<script type="text/javascript">
    $(document).ready(function(){
        $('#goToTop a').click(function(){
            $('html,body').animate({scrollTop:0},'slow');
        });
    });
</script>

接下来HTML代码和CSS的代码都是在DEMO基础上写的，后面的HTML和CSS直接在DEMO上添加或修改即可，为了节省大家的时间我就不在列出来了，我们主要就是看看jQuery代码的变化：

DEMO二：

Demo二这种方法实现的更理性化，也更完美化：也就是说一开始我这个按钮是隐藏的，只有我们的垂直滚动条距顶部有一定的距离后，这个按钮才会淡出显示，当回到顶滚动条回到顶部时，此按钮就又会淡淡的隐藏。我们就一起看看其实现过程吧：

//js
<script type="text/javascript">
    $(document).ready(function(){
        $("#goToTop").hide()//隐藏go to top按钮
        $(function(){
            $(window).scroll(function(){
                if($(this).scrollTop()>1){//当window的scrolltop距离大于1时，go to top按钮淡出，反之淡入
                    $("#goToTop").fadeIn();
                } else {
                    $("#goToTop").fadeOut();
                }
            });
        });
     

        // 给go to top按钮一个点击事件
        $("#goToTop a").click(function(){
            $("html,body").animate({scrollTop:0},800);//点击go to top按钮时，以800的速度回到顶部，这里的800可以根据你的需求修改
            return false;
        });
    });
</script>

试试吧，我想你会更喜欢这种效果，同时也会更有成就感。（注：这个Demo在IE6下CSS需做一定的处理，才能正常显示）

DEMO三：

DEMO三比前面两个DEMO都稍微更复杂一点，不过你理解了前面两个DEMO的话，我想你对这个Demo也不会感觉复杂，首先我们先看看各位代码的变化吧。

//html
<div class="container">
        <div class="header"> 我是头部</div>
        <div class="content">我是主内容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
 </div>

跟前面的代码相比较，我们可以明显的看出，这个DEMO少了一个div:

<div id="goToTop"><a href="#">点我回到页面顶部</a></div>

大家一定会感觉很奇怪，没了这个按钮，怎么点击回到顶部呢？想得也是没有错，我一开始也是这么想的，但后来看完整个DEMO后才恍然大悟，所以大家先别急，接着往下看。

//css
#goToTop {
     position: absolute;
     right: -130px;
     z-index: 9000;
}

其他样式代码都是一样的，这里只是对goToTop的div稍作修改了一下。虽然我们在HTML中暂时不存在这样的一个div，但我们后面还是用得上的，所以先把样式在这里修改好加上去。完成这两步了，又到了实现效果的关键一步：

//js
<script type="text/javascript">
    $(function(){
        var topDistance = 600;//goToTop距浏览器顶端的距离，这个距离可以根据你的需求修改
        var showDistance = 1;//距离浏览器顶端多少距离开始显示goToTop按钮，这个距离也可以修改，但不能超过浏览器默认宽度，为了兼容不同分辨率的浏览器，我建议在这里设置值为1；
        var goToTopButton = "<div id='goToTop'><a href='#'>点我回到页面顶部</a></div>";//定义一个变量，方便后面加入在html元素标签中插入这个goToTop按钮的标签
        var thisTop = $(window).scrollTop() + topDistance;
        $("div.container").append(goToTopButton);//在container的div里插入我们前面定义好的html标签元素
        $("#goToTop").css("top",thisTop);//设置goToTop按钮top的css属性和属性值
       

        if($(window).scrollTop() < showDistance) {
            $("#goToTop").hide();//滚动条距离顶端的距离小于showDistance是隐藏goToTop按钮
        }
      

        $(window).scroll(function(){
            thisTop = $(this).scrollTop() + topDistance;
            $("#goToTop").css("top",thisTop);//修改goToTop按钮的top距离
            if($(this).scrollTop() < showDistance) {//当window的垂直滚动条距顶部距离小于showDistance设置的值 时
                $("#goToTop").fadeOut("fast");//goToTop按钮淡出
            } else {
                $("#goToTop").fadeIn("fast");//反之按钮淡入
            }
        });
         //给go to top按钮绑定一个click事件      
        $("#goToTop a").click(function(){
            $("html,body").animate({scrollTop:0},"slow");//慢慢回到页面顶部
            return false;
        });
    });
</script>

这个DEMO是不是更合理的呀。这里有一点需要再次解释一下：最开始我们在HTML并没有加上goToTop的元素，怎么就有了呢？主要是我们通过jQuery加载了这个按钮的html标签，大家只要留意一下，我们加载页面后，通过firebug就可以看到这个按钮的标签也同时加载进来了：

DEMO四：

现在我们要看的这个Demo是通过配合jQuery的插件来实现回到页面顶部的效果，我们一起来看看其实现的过程。其中HTML 和CSS和我们一开始说的Demo一的是一样的，我们现在主要看其插件如何写，接着是如何调用写好的插件。

//js
<script type="text/javascript">
   //编写jQuery的回到页面顶部的插件
    $.fn.goToTop = function(){
        if($(window).scrollTop() < 1) {
            $("#goToTop").hide();//滚动条距离顶端的距离小于showDistance是隐藏goToTop按钮
        }
        $(window).scroll(function(){
                if($(this).scrollTop()>1){
                    $("#goToTop").fadeIn();
                } else {
                    $("#goToTop").fadeOut();
                }
            });
         //给这个按钮绑定一个单击事件 
        this.bind('click',function(){
            $('html,body').animate({scrollTop:0},'slow');
            return false;
        });        
    }
    //调用这个插件
    $(document).ready(function(){
        $('#goToTop').goToTop();
    });
</script>

DEMO五：

这个demo也是通过插件的方式实现的，但们跟demo4还是有一定的区别，首先我们看HTML和CSS代码：

//html
<div class="container">
    <div class="header"> 我是头部</div>
      <div class="content">我是主内容，高度是2000px</div>
      <div class="footer">我是在最底部</div>
</div>

//css
#goToTop {
     position: fixed;
     right: 10%;
     z-index: 9000;
     bottom: 10px;
}

//js
<script type="text/javascript">
  //编写一个插件叫做goToTop
   $.fn.goToTop = function(settings) {
       settings = $.extend({
           min: 1,  //设置距离顶部的最小值为1
           fadeSpeed: 200,  //设置一个淡出淡入的速度
           ieOffset: 50  //处理IE的兼容问题
       },settings);
       return this.each(function(){
           //listen for scroll
           var el = $(this);
          //  el.css("display","none");//in case the user forgot
           $(window).scroll(function(){
               //stupid IE hack
               if(!$.support.hrefNormalized) {  //设置这个按钮的css属性
                   el.css({
                       "position": "absolute",
                       "top" : $(window).scrollTop() + $(window).height() - settings.ieOffset
                   });
               }
               if($(window).scrollTop() >= settings.min) {
                   el.fadeIn(settings.fadeSpeed);
               } else {
                   el.fadeOut(settings.fadeSpeed);
               }
           });
       });
   };
   $(function(){
       var goToTopButton = "<div id='goToTop'><a href='#'>点我回到页面顶部</a></div>";
       $("div.container").append(goToTopButton);  //插入按钮的html标签
       if($(window).scrollTop() < 1) {
           $("#goToTop").hide();//滚动条距离顶端的距离小于showDistance是隐藏goToTop按钮
       }
       $("#goToTop").goToTop({
           min:1,
           fadeSpeed: 500
       });
       $("#goToTop").click(function(e){
           $("html,body").animate({scrollTop:0},"slow");
           return false;
       });
   });
</script>

在这里解释几个参数$.fn给jquery添加自定义事件的；$.extend函数用于将一个或多个对象的内容合并到目标对象，语法$.extend( target [, object1 ] [, objectN ] )意思就是把后面的object1，objectN 合并到target中，重合的属性把target中属性值替换掉，没有的属性，添加上；$.support判断包含表示不同浏览器特性或漏洞其中$.support.hrefNormalized判断浏览器是不是正规化（即标准浏览器因为有些低版本属性不支持例如ie6）。
大家可以对比一下，demo四和demo五的两种插件写法的相同与不同之处。

DEMO六：

这个Demo是我们今天要说的最后一个效果了，这个效果跟前面的每一个demo都有一点不同，主要有以下几个不同点：第一，我们是通过jQuery给页面加载了一个顶点的锚点和一个回到顶部的按钮，第二点，我们是通过点击按钮后回到了页面的起始锚点，所以这里需要注意一点，这个锚点必须放在页面的最顶端，第三点，我们点击了按钮后，按钮会回到锚点位置，同时按钮也会慢慢的隐藏起来。接着我们就来看看吧

//html
<div class="container">
    <div class="header"> 我是头部</div>
       <div class="content">我是主内容，高度是2000px</div>
       <div class="footer">我是在最底部</div>
</div>

当页面加入下面的jQuery代码后，我们的HTML代码就会自动加载一个锚点和一个按钮的元素标签，看看Firebug中的截图：

//css
#goToTop {
   position: fixed;
   right: 10%;
   z-index: 9000;
   top: 100%;
   margin-top: -50px;
}

又来到jQuery这一关键一步了，大家可以仔细看看下面的代码：

//js
<script type="text/javascript">
    $(function(){
        var goToTopButton = "<div id='goToTop'><a href='#'>点我回到页面顶部</a></div>";  //定义按钮标签
        $("div.container").append(goToTopButton); //在container的div最后面加上按钮标签
        if($(window).scrollTop() < 1) {
            $("#goToTop").hide();  //滚动条距离顶端的距离小于showDistance是隐藏goToTop按钮
        }
        var scroll_timer;
        var displayed = false;
        var $window = $(window);
        var top = 0;
        $window.scroll(function(){
            window.clearTimeout(scroll_timer);
            scroll_timer = window.setTimeout(function(){
                if($window.scrollTop() <= top) {
                    displayed= false;
                    $("#goToTop").fadeOut(500);
                } else if(displayed == false) { //show if scrolling down
                    displayed = true;
                    $("#goToTop").stop(true,true).show().click(function(){
                        $("#goToTop").fadeOut(500);
                    });
                }
            },100);
        });
    });
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,980评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,178评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,868评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,498评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,492评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,521评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,910评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,569评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,793评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,342评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,931评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2赞 342