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后滚动不起作用

回答

相关问题