jQuery動畫scrollTop

我有不少section標籤在一個溢出設置爲hidden。該代碼是沿着這樣的線：jQuery動畫scrollTop


<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')時，它會在div內滾動，但它不能正確執行。

我有這個here的活生生的例子。我認爲這與.offset()或我進入.animate()的東西有關，但我嘗試了很多不同的東西，但無濟於事。有人能指點我正確的方向還是告訴我我做錯了什麼？

來源

2011-12-13 jezza-tan

問題是position()是如何工作的，它返回有關scrollTop頂部/高度。

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

您可以在準備好的事件中獲得所有身高的位置。（所以scrollTop是0）

或者你也可以用消毒位置值：

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

來源

2011-12-13 22:58:03 InuYaksa

首先，您應該防止錨點的默認行爲，以便將頁面滾動到頁面的頂部。您可以通過在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); 
});

來源

2011-12-13 22:41:08 ShankarSangoli

我有`e.preventDefault（）`在那裏，但我認爲這是因爲某種原因搞砸了所以我把它拿出來。不幸的是，你提出的解決方案也不起作用。 – 2011-12-13 22:44:06

你可以提醒'sectionHeight`並看看你得到了什麼？ – ShankarSangoli 2011-12-13 22:45:18

-1

如果你想有一個簡單的jQuery插件來做到這一點，那麼你可以試試（AnimateScroll）目前支持超過30種寬鬆款式太

來源

2013-09-12 09:27:35

jQuery動畫scrollTop

回答

相關問題