jQuery scrollTop работает в одном фрагменте, не в другом на той же странице

Question

Итак, у меня есть пара экранов, в которые выходят и выходят (шаги), и то, что я пытаюсь достичь, заключается в том, что когда мы нажимаем кнопку на первый шаг - переход на 2-й шаг Верхняя часть (которая всегда является главной DIV, содержащей все из них ID: enter-give-away-now), а затем до 3-го и 4-го и т. д.

У меня возникла странная проблема, 1-й шаг работает (мы нажимаем на один из тегов <a>, и текущая страница исчезает, когда страница прокручивается вверх и показывает новый шаг), в то время как все остальные шаги просто не будут работать. Они исчезают, t прокрутите до верхней части enter-give-away-now.

<section class="section-second"> 
    <div class="container"> 
     <div id="enter-give-away-now" class="row phone-select-row">    
      <div class="step1 marker_show"> 
       <h1 style="padding: 0 4px 0 4px;"><span>Pick a color.</span>Choose your Color</h1> 

       <div class="col-md-3 col-sm-6 next"> 
        <a href="#enter-give-away-now" class="color-select-button color-select-button_4 scroll-me"> 
         <img class="img-responsive img-color-select" src="img/4.png"> 
         <span>White</span> 
        </a> 
       </div> 
      </div> 
      <!-- STEP 1 END --> 

      <div class="step2 marker_show" style="display: none;"> 
       <h1 style="padding: 0 4px 0 4px;"><span>Title</h1> 

       <div class="col-sm-4 next"> 

        <a href="" id="scroll-me2" class="capacity-select-button color-select-capacity_1 scroll-me"> 
         <span class="gb-amount">4<span class="gb-sign">GB</span></span> 
         <div class="capacity-info"> 
          <span class="reg-price"><span class="price-label">Test builds left:</span> 3</span> 
          <span class="reg-price"><span class="price-label">Regular price:</span> 59,99$</span> 
          <span class="your-price"><span class="price-label">Your price:</span> 29,00$</span> 
         </div> 
        </a> 

       </div> 
      </div> 
      <!-- STEP 2 END --> 
      </div> 
      </div> 
      </section> 

Javascript:

$('.scroll-me').bind("click", function(e) { 
    var target = $(this).attr("href"); // Get the target element 
    var scrollToPosition = $(target).offset().top; // Position to scroll to 
    $('html /* For FF & IE */,body /* For Chrome */').animate({ 
     'scrollTop': scrollToPosition 
    }, 500, function(target) { 
     window.location.hash = target; 
    }); 
    e.preventDefault(); 
}); 

$("#scroll-me2").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#container").offset().top 
    }, 500); 
}); 

Как вы можете видеть, что я пробовал 2 метода (.scroll-me прекрасно работает на STEP1). Шаг 2/3/4 находится в проблемах, и я также попытался сделать это с помощью другого кода (#scroll-me2), но это не сработало. Не обращайте внимания на то, что у меня есть как .scroll-me, так и #scroll-me2, это просто для того, чтобы проиллюстрировать, что я пробовал оба.

Answer 1

Вы можете изменить это

$("#scroll-me2").click(function() { 
$('html, body').animate({ 
    scrollTop: $("#container").offset().top 
}, 500); 

});

к этому;

$("#enter-give-away-now").on('click', '#scroll-me2', function() { 
$('html, body').animate({ 
    scrollTop: $("#container").offset().top 
}, 500); 

});

Когда ваш код jquery визуализирован, элемент с id # scroll-me2 не отображается, поэтому вы не можете использовать .click() там.