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

Question

I found this code for autoscroll a page.

<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>

My page looks like this:

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

My goal is to autoscroll from div to div after 20 seconds en after the last div back to top.

My Question is:

1. How to make it work scrolling from div to div?

2. I use window.location.href = "index.php" for refreshing the page en start over again. Is there a different way to achieve the same without a refresh? So go back to the top div and refresh the content of the page?

Answer 1

1. To scroll from div to div, you could define an array of the selectors for each div. Then in your AutoScroll function, get the element at the current index, get the offset from the top of the page for that element, and scroll to that. Then increment the index value.
2. To scroll to the top of the page, set the index back to 0 when there are no more elements to scroll to

Something like this should work:

<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

See this JSFiddle: https://jsfiddle.net/3gb5uLgs/

1. I added this function

 $(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: You can use location.reload(); .

Answer 3

You need to add ScrollTop function, and use it when you reach bottom.

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