3

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

Делаю так, при "доскролле" начинает срабатывать (если срабатывает) 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<header></header>
<main></main>
<footer>
  <div class="route-link" data-link="https://ru.stackoverflow.com/">
    <div class="next-route__btn">
      <!-- <img src="images/ring-alt.gif" class="ico" alt=""> -->
      <span>Услуги</span>
    </div>

    <div class="next-route__overlay"></div>
  </div>
</footer>

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

1
  • может запоминать что вернул setTimeout и в else блоке вызывать clearTimeout
    – diralik
    17 дек 2017 в 8:45

1 ответ 1

4

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

  1. в качестве аргумента setTimeout вы пишите выражение, в данном случае оно вычисляется сразу, т.к. это не ссылка на функцию, а ее вызов. Вам следует использовать функцию, внутри которой уже будет заменен location
  2. Событие скролла вызывается постоянно, в итоге вы несколько раз подряд взываете 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<header></header>
<main></main>
<footer>
  <div class="route-link" data-link="https://ru.stackoverflow.com/">
    <div class="next-route__btn">
      <!-- <img src="images/ring-alt.gif" class="ico" alt=""> -->
      <span>Услуги</span>
    </div>

    <div class="next-route__overlay"></div>
  </div>
</footer>

2
  • @HamSter пофиксил, timeout = nullпосле clearTimeout
    – teran
    17 дек 2017 в 11:09
  • 1
    Спасибо огромное!!!
    – SVE
    17 дек 2017 в 12:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.