jQuery Animate如果到达特定位置则停止

时间:2019-03-30 08:00:52

标签: javascript jquery

我有一个包含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>

0 个答案:

没有答案