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)
                    }
                });
            });