jQuery自动将div滚动到div并返回顶部

Question

我找到了用于自动滚动页面的代码。

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
var myInterval = false;
myInterval = setInterval(AutoScroll, 5000);

function AutoScroll() {
    var iScroll = $(window).scrollTop();
    iScroll = iScroll + 500;
    $('html, body').animate({
        scrollTop: iScroll
    }, 1000);
}

$(window).scroll(function () {
    var iScroll = $(window).scrollTop();
    if (iScroll == 0) {
        myInterval = setInterval(AutoScroll, 5000);
    }
    if (iScroll + $(window).height() == $(document).height()) {

        clearInterval(myInterval);

        setTimeout(function(){ window.location.href = "index.php"; },3000)  

    }
});
});
});//]]>  

</script>

我的页面如下所示：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

我的目标是在最后一个div返回顶部20秒后从div自动滚动到div。

我的问题是：

1. 如何使其从div滚动到div？

2. 我使用window.location.href =“ index.php”刷新页面，重新开始。 是否有另一种无需刷新即可达到相同目的的方法？ 因此，返回顶部div并刷新页面内容吗？

Answer 1

1. 要从div滚动到div，可以为每个div定义一个选择器数组。 然后在您的AutoScroll函数中，获取当前索引处的元素，获取该元素与页面顶部的偏移量，然后滚动到该位置。 然后增加索引值。
2. 要滚动到页面顶部，请在没有更多元素滚动到时将索引设置回0。

这样的事情应该起作用：

<script type='text/javascript'>
    $(window).load(function(){
        $(document).ready(function () {
            var myInterval = false;
            var index = 0;
            var elements = ["#div1","#div2","#div3","#div4","#div5"];
            myInterval = setInterval(AutoScroll, 5000);

            function AutoScroll() {
                $('html, body').animate({
                    scrollTop: $(elements[index]).offset().top
                }, 1000);

                if(index < (elements.length - 1)){
                    index++;
                } else {
                    index = 0;
                }
            }
        });
    });
</script>

Answer 2

看到这个JSFiddle： https ://jsfiddle.net/3gb5uLgs/

1. 我添加了这个功能

 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\\//,'') == this.pathname.replace(/^\\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); 

2：您可以使用location.reload(); 。

Answer 3

您需要添加ScrollTop函数，并在到达底部时使用它。

$(document).ready(function () {
                var myInterval = false;
                myInterval = setInterval(AutoScroll, 5000);

                function AutoScroll() {
                    var iScroll = $(window).scrollTop();
                    iScroll = iScroll + 500;
                    $('html, body').animate({
                        scrollTop: iScroll
                    }, 1000);
                }

                //The function scroll to 0 position.
                function scrollTop()
                {
                    $('html, body').animate({
                        scrollTop: 0
                    }, 1000);
                }
                $(window).scroll(function () {
                    var iScroll = $(window).scrollTop();
                    if (iScroll == 0) {
                        clearInterval(myInterval);
                        myInterval = setInterval(AutoScroll, 5000);
                    }
                    if (iScroll + $(window).height() == $(document).height()) {
                        clearInterval(myInterval);
                        //Instead refresh, I just scrolled to top.
                        setTimeout(scrollTop,5000)
                    }
                });
            });