jQuery auto scroll 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 обратно в верхней части.

Мой вопрос:

1. Как заставить его работать с прокруткой дел до Div?

2. Я использую window.location.href = "index.php" для обновления страницы en start over again. Есть ли другой способ добиться этого без обновления? Итак, вернитесь в верхний div и обновите содержимое страницы?

Answer 1

1. Для перехода от дел до Див, можно определить массив селекторов для каждого дел. Затем в вашей функции 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) 
        } 
       }); 
      });