<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Atea - Hero's Grave

    面向?qū)ο螅_源,框架,敏捷,云計(jì)算,NoSQL,商業(yè)智能,編程思想。

      BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
      40 隨筆 :: 0 文章 :: 28 評(píng)論 :: 0 Trackbacks
    傳統(tǒng)的"Return to Top"置于頁面底部或指定位置,點(diǎn)擊后返回頁面頂部。
    但其存在諸多不便:
    1、頁面頂部必須定義一個(gè)相應(yīng)的錨點(diǎn),其本身也會(huì)占用DOM空間,很容易發(fā)生返回的不是絕對(duì)的頂部而是該錨點(diǎn)(滾動(dòng)條會(huì)稍微向下一點(diǎn),而不是在0的位置)
    2、如果頁面很長,想在滾動(dòng)條任意處回頂部會(huì)變得難以處理。

    使用jQuery能大大改善這一用戶體驗(yàn)。本文章將能做到:
    "Return to Top"在頁面初始化時(shí)不顯示,當(dāng)移動(dòng)滾動(dòng)條時(shí)出現(xiàn)并隨滾動(dòng)條位置變化而變化。
    點(diǎn)擊"Return to Top"頁面移動(dòng)到頂部,當(dāng)滾動(dòng)條到頂部時(shí)"Return to Top"自動(dòng)隱藏。
    以上均伴有動(dòng)畫效果。
    在線Demo:http://atealxt.appspot.com/guestbook
    下載實(shí)例:http://m.tkk7.com/Files/atealxt/returnToTop.zip

    首先有一個(gè)DIV
    <div id="switcher">
      
    <href="#top" class="return-to-top">Return to Top</a>
    </div>

    其對(duì)應(yīng)的CSS為
    #switcher {
      position
    : absolute;
      width
    : 90px;
      padding
    : .5em;
      border
    : 1px solid #777;
      background
    : #ddd;
    }
    .return-to-top 
    {
      clear
    : left;
    }

    在document.ready中令"Return to Top"移動(dòng)到頁面最右邊,并隱藏。
    $switcher.animate({
        'left': $('#container').outerWidth() 
    - $switcher.outerWidth()
      }, 
    function() {
           $document.bind('scroll', moveSwitcher);
         }
    );
    $switcher.hide();
    綁定scroll事件要注意,要想支持IE6的話,必須用$window來綁定scroll事件。

    函數(shù)moveSwitcher實(shí)現(xiàn)"Return to Top"隨滾動(dòng)條移動(dòng)而移動(dòng)。
    這里設(shè)定了一個(gè)事件延遲捕捉,以達(dá)到動(dòng)畫效果。
    var moveSwitcher = function() {
        
      
    var delay = 500;
      
    var executionTimer;
      
    return function() {
        
    if (!!executionTimer) {
          clearTimeout(executionTimer);
        }
        
        executionTimer 
    = setTimeout(function() {
          $switcher.animate({ 'top': $window.height() 
    + $document.scrollTop() - $switcher.height() - 25 }, 'slow', slideSwitcher);
        }, delay);
      };
    }();

    函數(shù)slideSwitcher為頁面移動(dòng)到頂部時(shí)隱藏"Return to Top"。
    var slideSwitcher = function() {
      
    if ($document.scrollTop() == 0) {
        $switcher.slideUp('fast');
      } 
    else {
        $switcher.slideDown('fast');
      }
    };

    為了完善這一效果,我們給resize事件也綁定moveSwitcher
    $window.resize(function(){
      $switcher.animate({ 'left': $('#container').outerWidth() 
    - $switcher.outerWidth() } , moveSwitcher);
    });

    最后,給"Return to Top"添加onclick事件
    1 $document.ready(function() {
    2 
    3   $('a.return-to-top').click(function() {
    4     $('html').animate({scrollTop: 0}, 'fast');
    5     $('body').animate({scrollTop: 0}, 'fast');
    6     return false;
    7   });
    8 });
    第5行是專門為chrome和safari而追加的(感謝Wyatt同學(xué)提醒)
    參考http://stackoverflow.com/questions/1830080/jquery-scrolltop-doesnt-seem-to-work-in-safari-or-chrome-windows

    好了,大功告成了。其實(shí)需要寫的代碼很少,真是贊嘆jQuery的強(qiáng)大:D
    posted on 2010-05-13 11:14 Atea 閱讀(2180) 評(píng)論(2)  編輯  收藏 所屬分類: Javascript

    評(píng)論

    # re: 使用jQuery改善"Return to Top" 2010-05-13 11:32 Wyatt
    chrome里面不好使~~  回復(fù)  更多評(píng)論
      

    # re: 使用jQuery改善"Return to Top" 2010-05-13 13:16 Atea
    @Wyatt
    謝謝提醒,已修改:P  回復(fù)  更多評(píng)論
      


    只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


    網(wǎng)站導(dǎo)航:
     
    主站蜘蛛池模板: 欧洲乱码伦视频免费| 国产高潮流白浆喷水免费A片 | 久久久99精品免费观看| 综合久久久久久中文字幕亚洲国产国产综合一区首 | a毛片全部免费播放| 久久久亚洲精品蜜桃臀| 一级特黄aaa大片免费看| 久久精品国产亚洲一区二区三区| 成年网站免费入口在线观看| 亚洲国产成人久久一区久久| 一级毛片在线免费视频| 亚洲女同成av人片在线观看| 日本道免费精品一区二区| 亚洲精品高清国产一久久| 1000部免费啪啪十八未年禁止观看 | 亚洲一区二区三区AV无码| 嫩草在线视频www免费看| 久久亚洲精品国产精品| 麻豆国产精品免费视频| 亚洲色在线无码国产精品不卡| 国产午夜免费秋霞影院| 一区二区免费在线观看| 久久久久久久尹人综合网亚洲| 最近高清中文字幕免费| 亚洲人成网站18禁止| 亚洲电影日韩精品 | 久久精品国产亚洲AV麻豆王友容| 亚洲一区二区三区免费观看| 亚洲乱理伦片在线观看中字| 亚洲欧洲自拍拍偷精品 美利坚| 免费在线黄色电影| 亚洲香蕉久久一区二区三区四区| 四虎国产精品免费视| 嫩草在线视频www免费观看 | 羞羞网站在线免费观看| 国产亚洲免费的视频看| 久久久久久99av无码免费网站 | 久久久久久影院久久久久免费精品国产小说 | 免费无码又爽又刺激高潮视频| 亚洲H在线播放在线观看H| 亚洲精品麻豆av|