Javascript菜單 - 滾動/內容跳轉

Question

我創建了一個漂亮的小javascript菜單，它故意不使用數據標籤，因爲我發佈了與html純化器衝突（另一個長篇故事）。

無論如何，經過大量修補後，功能和樣式完全按照我的意願工作，但有一個例外 - 當我點擊每個菜單項時，它會在屏幕上的不同點打開內容，看似取決於數量的內容。我希望它始終在頂部打開，以便始終可以看到菜單以及內容的頂部，然後可以隨意向下滾動。

我一直在試圖解決這一段時間，所以將不勝感激任何援助，或修改附帶的小提琴。

預先感謝

保羅

https://jsfiddle.net/awcguxs5/

$(document).ready(function() { 
var lastItem = null; 
$('#listingmenu').on('click', 'a', function() { 
    newItem = this.getAttribute('href').substring(1); 
    if (newItem != lastItem) { 
      $('.current').not($(this).closest('li').addClass('current')).removeClass('current'); 
     // fade out all open subcontents 
     $('.pbox:visible').hide(600); 
     // fade in new selected subcontent 
     $('#' + newItem).show(600); 
     lastItem = newItem; 
    } 
}).find('a:first').click(); 

}）;

Answer 1

問題是引用仍然會去相應的ID位置。我添加了一行jquery，它會在點擊後將頁面滾動回頂端。在這裏添加一行：

$("html, body").animate({ scrollTop: 0 }, 1); 

這是您的jsfiddle這一行：

https://jsfiddle.net/awcguxs5/2/

讓我知道，如果這是你要找的人！ :)

Answer 2

這恰好是因爲你不想使用「數據標籤」。

一下添加到onclick塊：

$('#listingmenu').on('click', 'a', function (e) { 
    e.preventDefault(); 
    .... //rest of your code. 

e.preventDefault()將停止a-href默認操作，而你的情況使用#div1錨跳轉到該div。

你更新小提琴這裏：https://jsfiddle.net/awcguxs5/3/

Answer 3

$(document).ready(function() { 
var lastItem = null; 
$('#listingmenu').on('click', 'a', function() { 
    newItem = this.getAttribute('href').substring(1); 
    if (newItem != lastItem) { 
     $('.current').not($(this).closest('li').addClass('current')).removeClass('current'); 
     // fade out all open subcontents 
     $('.pbox').hide(600); 
     // fade in new selected subcontent 
     setTimeout(function(){$('#' + newItem).show(600)} , 600); 
     lastItem = newItem; 
    } 
}).find('a:first').click(); 

}）;

settimeout修復了這個問題，並給出了-i認爲 - 比同時觸發hide和show更好的效果。