Question

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

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

我的页面如下：

{{1}}

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

我的问题是：

如何让它从div滚动到div？
我使用window.location.href =“index.php”刷新页面重新开始。有没有不同的方法来实现相同而不刷新？那么回到顶部div并刷新页面内容？

Answer 1

要从div滚动到div，您可以为每个div定义一个选择器数组。然后在AutoScroll函数中，获取当前索引处的元素，从该页面顶部获取该元素的偏移量，然后滚动到该元素。然后递增索引值。
要滚动到页面顶部，当没有更多元素可以滚动到

这样的事情应该有效：

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

我添加了此功能

＆＃13;

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

＆＃13;

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并返回顶部

3 个答案: