jQuery動畫scrollTop

Question

我在div中有很多section標簽，溢出設置為hidden 。 代碼是這樣的：

<div id="viewport">
   <section>
      content
   </section>
   <section>
      content
   </section>
</div>

我把它設置為這樣，因為我希望能夠在菜單中按下相應的鏈接時滾動div包含的sections 。 我有這個功能：

$('#mn a').click(function(){
   var aHref = $(this).attr("href");
   var sectionHeight = $('section'+aHref+'').height();
   $('#viewport').height(sectionHeight);
});

我用它來調整#viewport div的大小，因為這些sections的大小不同。 當我嘗試將此滾動部分放入該函數時：

$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);

它使整個頁面滾動。 當我嘗試用$('section, #viewport')替換$('body,html')時$('section, #viewport')它會在div中滾動，但它沒有正確地執行。

我在這里有一個實例。 我認為它與.offset()或我傳入.animate() ，但我嘗試了很多不同的東西，但無濟於事。 有人可以指出我正確的方向或告訴我我做錯了什么？

Answer 1

問題是position()如何工作，它返回與scrollTop相關的top / height。

因此，如果您請求點擊$('section'+aHref+'').position().top返回的位置是從scrollTop值修改的。

您可以在准備好的活動中獲得所有高度位置。 （所以scrollTop為0 ）

或者您可以使用以下方法清理位置值：

$("section#skills").position().top + $("#viewport").scrollTop()

Answer 2

首先，您應該阻止錨點的默認行為，以便將頁面滾動到頁面頂部。 您可以通過在click事件處理程序內的事件對象上調用preventDefault()方法來完成此操作。 試試這個

$('#mn a').click(function(e){
   e.preventDefault();

   var aHref = $(this).attr("href");
   var top = $('section'+aHref+'').position().top;
   $('#viewport').animate({scrollTop: top}, 800);
});

Answer 3

如果你想要一個簡單的jquery插件來執行此操作，那么你可以嘗試（ AnimateScroll ），它目前也支持超過30種緩動樣式