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>

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

我的问题是：

如何让它从 div 滚动到 div？
我使用window.location.href = "index.php"刷新页面然后重新开始。有没有不同的方法可以在不刷新的情况下实现相同的目标？所以回到顶部div刷新页面内容？

Answer 1

要从 div 滚动到 div，您可以为每个 div 定义一个选择器数组。然后在 AutoScroll 函数中，获取当前索引处的元素，获取该元素距页面顶部的偏移量，然后滚动到该元素。然后增加索引值。
要滚动到页面顶部，当没有更多元素可滚动到时，将索引设置回 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/

我添加了这个功能

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

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

jQuery auto scroll div to div and back to top

javascript

jquery

autoscroll