scrollTop Animation後滾動不起作用

點擊屏幕底部^字符的小格後，滾動動畫將正常啓動。但做了多次後，當您嘗試向下滾動時，它會堅持一段時間（與您點擊div的次數成比例）。scrollTop Animation後滾動不起作用

有人可以告訴我爲什麼這樣做嗎？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    </head> 
    <body> 
    <div id="test">Where to go</div> 
    <div id="goToTop">^</div> 
    </body> 
</html>

JS：

$(window).scroll(function(){ 
    var st = $(window).scrollTop(); 
    var timeout = setTimeout(function(){ 
    var currentScrollTop = $(window).scrollTop(); 
    if(st == currentScrollTop){ 
     var yPosInAbsolute = window.innerHeight - 100; 
     $('#goToTop').css({'top': st + yPosInAbsolute, 'right': 100}); 

     $('#goToTop').show(); 
     $('#goToTop').click(function(){ 
     $('html,body').animate({scrollTop: $('#test').offset().top - 50}, 2000); 
     clearTimeout(timeout); 
     }); 
    }else{ 
     $('#goToTop').hide(); 
     clearTimeout(timeout); 
    } 
    }, 2000); 
});

的DEMO

來源

2014-07-18 Xlander

某些時候是超時和動畫時間堆棧。 – frikinside

謝謝你的幫助。 :) – Xlander

[小提琴演示]（http://jsfiddle.net/GopsAB/sCaLr/1/）我的嘗試去快速回答的浪費。無論如何嘗試:) –

你需要jQuery的.stop()功能。這是因爲動畫調用已排隊。

$('html,body').stop(true, false).animate(...)

See

來源

2014-07-18 11:14:37 gorpacrate

非常感謝！ :) – Xlander

這仍然是越野車。它不是一直工作。我在彼此旁邊有幾塊div，在移動設備上它是每行一個。當你點擊一個它擴展並滾動到打開的div的頂部。當你點擊幾個框時，它會一直拖動頁面到最後一次點擊。你不能留在一個地方。我想我shuold解決這個不同 – Amjo

@Amjo .stop（）方法的第二個參數是關於停止當前動畫。嘗試閱讀文檔，我的答案中有一個鏈接。嘗試.stop（true，true） - 它應該立即跳轉到動畫的最終目的地。如果你需要在點擊的時候停止你所在的位置，那麼你可能應該記住點擊時的當前滾動位置，並且在jquery跳轉到動畫的最後位置（通過requestAnimationFrame或零超時）之後，使用記住的位置手動更新滾動。應該無縫工作（沒有明顯的跳躍），但需要試驗。 – gorpacrate

scrollTop Animation後滾動不起作用

回答

相關問題