如何使jquery動畫工作流利？

我在我的html頁面中有這段代碼。如何使jquery動畫工作流利？

$('#buttonMenu').on('click',function(){ 
    var errDiv = $("#divWhichToMoveTo"); 
    errDiv.show(); 
    var pos = errDiv.position().top; 
    $("html, body").animate({ scrollTop: pos }); 
    }); 


    <li><a id="buttonMenu" title="Yea" alt="Yea" href="#">Yea</a></li> 

    <div id="divWhichToMoveTo"><strong>An error occured, oh noes!!</strong></div>

它應該使頁面向下滾動（輕輕）的地方是「divWhichToMoveTo」，當用戶點擊「buttonMenu」的地步。它的工作原理，但我有一個長頁面內的幾個按鈕和幾個div。有時在html頁面的不同點上從一個點傳遞到另一個點，我可以在動畫開始之前看到毫秒級的html頁面的開始，並將我從我所處的位置帶到我想要着陸的點。我錯過了什麼？

來源

2013-06-26 Sasha Grievus

我想我可以幫助澄清其他答覆者似乎錯過的問題。這是一個小提琴。 http://jsfiddle.net/fpxuC/255/向下滾動到「Yea」鏈接，並在點擊它時注意右側滾動條。頂部的滾動條JUMPS，*然後*動畫結束。 Elisabetta詢問爲什麼頁面在滾動前跳到頂部。 –

使用這個代替：

$('#buttonMenu').on('click', function (e) { 
    e.preventDefault(); 
    var errDiv = $("#divWhichToMoveTo"); 
    errDiv.show(function() { 
     $("html, body").animate({ 
      scrollTop: errDiv.offset().top 
     }, 1000); 
    }); 
});

e.preventDefault()阻止默認動作是去#。這是頁面跳轉的原因。

.position().top正在返回錯誤的值。這使用.offset()獲得相對於文檔的偏移量，並且完美地工作。

演示：http://jsfiddle.net/cEwQv/1/（保證金只是用於所以有地方滾動到）

來源

2013-06-26 14:12:30 Joe

完美的作品！謝謝你的全面解釋！ –

-1

您可以添加時間在這樣毫秒 - 如果我沒有記錯>

$("html, body").animate({ scrollTop: pos }, 2000)

1000毫秒取1秒！

來源

2013-06-26 14:11:37

添加JavaScript：無效（0）代替＃的錨鏈接也將有助於

對於實例

寫

<a href="javascript:void(0)">Yea</a>

代替

<a href="#">Yea</a>

來源

2013-06-26 16:17:33 tousif

如何使jquery動畫工作流利？

回答

相關問題