2

Добрый день. Задача такая: Имеем несколько секций. Секция 1 имеет высоту 100vh.

<div class="parent">
    <div class="child_1">Секция 1</div>
    <div class="child_2">Секция 2</div>
    <div class="child_3">Секция 3</div>
    <div class="child_4">Секция 4</div>
</div>

  .parent{
        width: 90%;
        height: 100vh;
        margin: 0 auto;
        font-size: 20px;
        text-align: center; }

    .child_1{
        width: 100%;
        height: 100vh;
        background: #b721fa;}

    .child_2,.child_3,.child_4{
        width: 100%;
        height: 1000px;
        background: red;}

    .child_3,.child_4{background: #0062ff;}

    .child_4{background: #00ffba;}

Необходимо при событие scroll() запустить плавную прокрутку от секции 1 к секции 2 и наоборот. Дальнейшая прокрутка (после секции 2) должна быть стандартная.

В первый раз прокручивается плавно пример, а потом застревает на одном месте и не работает скролл. Без анимации прокрутка идет правильно, но резко.

Подскажите что подправить в скрипте.

$(document).ready(function () {
            var child_1Height=$(".child_1").innerHeight();
            var tempScrollTop= 0;
            var currentScrollTop = 0;
            $(document).scroll(function(){  
                currentScrollTop = $(document).scrollTop();
                if (tempScrollTop < currentScrollTop ){ 
                   //фиксируем что, скролинг идет вниз   
                    if(currentScrollTop < child_1Height){
                        $("html,body").animate({scrollTop:child_1Height-50},2000);
                        return false;
                    }
                }
                else if (tempScrollTop > currentScrollTop){
                //фиксируем что, скролинг идет вверх 
                    if(currentScrollTop < child_1Height){
                        $("html,body").animate({ scrollTop:0},2000);
                        return false;
                    }  
                }
                tempScrollTop = currentScrollTop;
            });//конец scroll
        }); //конец ready

1 ответ 1

1

$(function() {
  var limit = $('.child_2').offset().top
    , tempScrollTop = 0
    , currentScrollTop = 0
    , animating = false
    , target = $('html, body');
  $(document).scroll(function(e) {
    if (animating) {
      return;
    }
    currentScrollTop = $(document).scrollTop();
    if (tempScrollTop < currentScrollTop && currentScrollTop < limit) {     
      animating = true;
      target.stop(true).animate({ scrollTop: limit }, 1000, function() {
        animating = false;
        tempScrollTop = $(document).scrollTop();
      });
    }
    else if (tempScrollTop > currentScrollTop && currentScrollTop < limit) {
      animating = true;
      target.stop(true).animate({ scrollTop: 0 }, 1000, function() {
        animating = false;
        tempScrollTop = $(document).scrollTop();
      });
    }  
  });
});
.parent {
  width: 90%;
  height: 100vh;
  margin: 0 auto;
  font-size: 20px;
  text-align: center;
}

.child_1 {
  width: 100%;
  height: 100vh;
  background: #b721fa;
}

.child_2, .child_3, .child_4 {
  width: 100%;
  height: 1000px;
  background: red;
}

.child_3, .child_4 {
  background: #0062ff;
}

.child_4 {
  background: #00ffba;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child_1">Секция 1</div>
  <div class="child_2">Секция 2</div>
  <div class="child_3">Секция 3</div>
  <div class="child_4">Секция 4</div>
</div>

Ваш ответ

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

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