2011-04-05 142 views
0

想知道是否有人可以提供幫助。jQuery手風琴+ scrollTo - 需要手風琴回滾到焦點

我使用的是手風琴來顯示一個分類廣告網站的子分類列表,有3個主要類別 - 我們將稱之爲X,Y,Z

我的問題是,子 - 類別列表可能相當長 - 並且在X,Y,Z之間不一致。目前,當單擊標題X時 - 手風琴延伸超出摺疊範圍,顯然用戶將向下滾動頁面。當用戶點擊Y時 - 目前有更小的子類別列表,手風琴將關閉顯示Y的子類別列表,但焦點不在Y開口的手風琴上 - 窗口停留在子類別的底部X完成。

是否有某種方法將用戶導回到ul.accordionMenu的頂部?


JS是在這裏:

jQuery.fn.initMenu = function() { 
    return this.each(function(){ 
     var theMenu = $(this).get(0); 
     $('.acitem', this).hide(); 
     $('li.expand > .acitem', this).show(); 
     $('li.expand > .acitem', this).prev().addClass('active'); 
     $('li a', this).click( 
      function(e) { 
       e.stopImmediatePropagation(); 
       var theElement = $(this).next(); 
       var parent = this.parentNode.parentNode; 
       if($(parent).hasClass('noaccordion')) { 
        if(theElement[0] === undefined) { 
         window.location.href = this.href; 
        } 
        $(theElement).slideToggle('normal', function() { 
         if ($(this).is(':visible')) { 
          $(this).prev().addClass('active'); 
         } 
         else { 
          $(this).prev().removeClass('active'); 
         }  
        }); 
        return false; 
       } 
       else { 
        if(theElement.hasClass('acitem') && theElement.is(':visible')) { 
         if($(parent).hasClass('collapsible')) { 
          $('.acitem:visible', parent).first().slideUp('normal', 
          function() { 
           $(this).prev().removeClass('active'); 
          } 
         ); 
         return false; 
        } 
        return false; 
       } 
       if(theElement.hasClass('acitem') && !theElement.is(':visible')) {   
        $('.acitem:visible', parent).first().slideUp('normal', function() { 
         $(this).prev().removeClass('active'); 
        }); 
        theElement.slideDown('normal', function() { 
         $(this).prev().addClass('active'); 
        }); 
        return false; 
       } 
      } 
     } 
    ); 
}); 
}; 

$(document).ready(function() {$('.accordionMenu').initMenu();}); 

任何幫助將不勝感激 - 我已搜查這裏和嘗試了一些的建議然而似乎沒有什麼是工作。

+0

我很好奇,如果我的回答無論如何幫助你。 – 2011-04-05 17:48:15

回答

0

在點擊事件中,使用animate()可以平滑地滾動回到手風琴的頂端。

$('html, body').animate({scrollTop: $("#accordion").offset().top}, 500); 

這會將屏幕滾動到#accordion的最高點。

這裏有一個簡單的一長串的例子:http://jsfiddle.net/SPL_Splinter/dJcBn/

這在用戶每次點擊一個類別屏幕將回到頂部滾動時間的方式。

+0

位延遲 - 但謝謝! – 2011-06-08 11:27:10

+0

你能解釋爲什麼有$('html,body')而不是簡單的$? – Artur 2013-09-05 10:26:57

+0

@Artur我想這是因爲你必須選擇一些動畫。在這種情況下,您將選擇身體並將其滾動到上述位置。另外,$對象甚至沒有動畫功能。如果你使用$ .animate(),它會啓動一個_TypeError:$ .animate不是一個function_ – 2013-10-14 19:59:29