Переход на следующую страницу при “доскролле” до низа страницы

#javascript #jquery

Доскроллив до конца страницы должен произойти переход на следующую страницу с задержкой.
Сайт пример , но тут все на ангуляре и не понятно.

Делаю так, при "доскролле" начинает срабатывать (если срабатывает) setTimeout и переход,
если в это время начать скроллить вверх, переход должен отменяться:



var scrollY =  $(window).scrollTop(),
  currentOffset = scrollY + window.innerHeight,
  element = $('footer'),
  bg = $('.next-route__overlay'),
  offset = element.offset().top,
  adress = $('.route-link').data('link'),
  timeout,
  show = false;

  console.log(offset + ' ' + currentOffset);

$(window).scroll(function(){

  if(offset <= $(window).scrollTop()+window.innerHeight){		
    show = true;    
    bg.show();
    timeout = setTimeout(window.location.replace(adress), 5500);		    
  }else {
    show = false;
    clearTimeout(timeout);
  }

});
main {
  height: 2000px;
  background: #ccc;
}

footer {
  padding: 1rem;
  text-align: center;
}

.next-route__overlay {
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 4rem;
    background: #000;
    opacity: .5;
  display: none;
}






  

    

      
      Услуги
    

    

  





Вопрос: как можно осуществить автоматический переход на следующую страницу "доскроллив"
до конца страницы средствами jquery (js), но при обратном сролле переход должен отменяться?
    

Ответы

Ответ 1

в вашем коде две проблемы.


в качестве аргумента setTimeout вы пишите выражение, в данном случае оно вычисляется
сразу, т.к. это не ссылка на функцию, а ее вызов. Вам следует использовать функцию,
внутри которой уже будет заменен location
Событие скролла вызывается постоянно, в итоге вы несколько раз подряд взываете setTimeout
каждый раз генерируется новый хэндл. Когда же вы начинаете крутить вверх, то очищаете
только последний сгенерированный таймаут, а предыдущие созданные остаются и срабатывают.
Поэтому назначать новый setTimeout нужно  только в том случае, если он еще не вызыван.




var scrollY =  $(window).scrollTop(),
  currentOffset = scrollY + window.innerHeight,
  element = $('footer'),
  bg = $('.next-route__overlay'),
  offset = element.offset().top,
  adress = $('.route-link').data('link'),
  timeout = null,
  show = false;

  console.log(offset + ' ' + currentOffset);

$(window).scroll(function(){

  if(offset <= $(window).scrollTop()+window.innerHeight){		
    show = true;    
    bg.show();
    if(!timeout){
        timeout = setTimeout(function(){ 
                      window.location.replace(adress); 
                   }, 5500);		  
    }
  }
  else {
    show = false;
    clearTimeout(timeout);
    timeout = null;
  }

});
main {
  height: 2000px;
  background: #ccc;
}

footer {
  padding: 1rem;
  text-align: center;
}

.next-route__overlay {
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 4rem;
    background: #000;
    opacity: .5;
  display: none;
}






  

    

      
      Услуги