我有一个包含2个子容器的容器。第一容器是动态容器,其中可以具有或可以具有多个元素。第二个子容器是目标,在单击按钮或加载第一个子容器的内容之后,滚动到我的滚动动画的目标应该在其中移动。
现在我有一个条件,当window.top到达某个像素时触发滚动到它需要停在那。因此,可以说我的第二个容器是int 1500px,但我只希望窗口滚动到最大1000px。如何使用Animate和scrollto实现此目的?
下面是一个示例结构
<div><button id="thebutton">Click</button></div>
<ul id="first-sub-container">
<li>s fasdf asdf asdf asd sdaf sadf asdf adf asdf</li>
<li>s fasdf asdf asdf asd sdaf sadf asdf adf asdf</li>
<li>s fasdf asdf asdf asd sdaf sadf asdf adf asdf</li>
<li>s fasdf asdf asdf asd sdaf sadf asdf adf asdf</li>
<li>s fasdf asdf asdf asd sdaf sadf asdf adf asdf</li>
<li>s fasdf asdf asdf asd sdaf sadf asdf adf asdf</li>
</ul>
<div id="second-sub-container">
<div id="container">
<form>
<h1>This will be my title</h1>
<ul>
<li><div>This is the content | and another content | and last content</div></li>
</ul>
</form>
</div>
</div>
这是我的JS脚本
$(document).ready(function() {
$("#thebutton").on('click', function() {
$.ajax({
success: function(result){
$("#first-sub-container").html(result);
scrollToElement('#second-sub-container', 700);
}
});
});
});
function scrollToElement(element, speed) {
// In this code I need some kind of checking that
// if the $(window).scrollTop(); reaches 1000px
// it should stop the animate. But how can I do
// that with the animate scrolltop
jQuery('html, body').stop().animate({
scrollTop: jQuery(element).offset().top
}, speed, function() {
console.log("Scroll done");
});
}
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
console.log(scroll);
});
</script>