將頁面滾動到以更改活動/當前菜單項

Question

我正在使用http://jsfiddle.net/mekwall/up4nu/在一臺尋呼機上滾動。點擊菜單項時，我將如何停用當前標記？我想保持滾動。但是當我在第一個項目上點擊第四個項目時，我只想讓第四個項目標記爲當前項目，並且沒有標記通過第二個和第三個項目「滑動」。

我也試過onePageNav，但如果我有沒有內容（部分ID爲）的着陸頁上，子頁它打破。

Answer 1

This應該工作:)我添加了一個noScrollAction變量。我在滾動動畫開始之前將其設置，並在結束時將其禁用。但是動畫結束後，窗口滾動仍然會觸發（還沒有弄清楚爲什麼）。所以我在這上面加了一點延遲。併爲正確的錨點設置活動類。

// Cache selectors 
var lastId, 
    topMenu = $("#top-menu"), 
    topMenuHeight = topMenu.outerHeight()+15, 
    // All list items 
    menuItems = topMenu.find("a"), 
    // Anchors corresponding to menu items 
    scrollItems = menuItems.map(function(){ 
     var item = $($(this).attr("href")); 
     if (item.length) { return item; } 
    }), 
    noScrollAction = false; 

// Bind click handler to menu items 
// so we can get a fancy scroll animation 
menuItems.click(function(e){ 
    var href = $(this).attr("href"), 
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
    noScrollAction = true; 
    $('html, body').stop().animate({ 
     scrollTop: offsetTop 
    },{ 
     duration: 300, 
     complete: function() { 
      menuItems 
       .parent().removeClass("active") 
       .end().filter("[href=" + href +"]").parent().addClass("active"); 
      setTimeout(function(){ noScrollAction = false; }, 10); 
     } 
    }); 
    e.preventDefault(); 
}); 

// Bind to scroll 
$(window).scroll(function(){ 
    if(!noScrollAction){ 
     // Get container scroll position 
     var fromTop = $(this).scrollTop()+topMenuHeight; 

     // Get id of current scroll item 
     var cur = scrollItems.map(function(){ 
     if ($(this).offset().top < fromTop) 
      return this; 
     }); 
     // Get the id of the current element 
     cur = cur[cur.length-1]; 
     var id = cur && cur.length ? cur[0].id : ""; 

     if (lastId !== id) { 
      lastId = id; 
      // Set/remove active class 
      menuItems 
      .parent().removeClass("active") 
      .end().filter("[href=#"+id+"]").parent().addClass("active"); 
     } 
    }  
});​