jQuery scrollTopは1つのスニペットで動作し、同じページの別のスニペットではありません

Question

私はいくつかの画面をフェードイン/フェードアウト（ステップ）しており、達成しようとしているのは、最初のステップでは2段目のトップ部分（常にID：enter-give-away-nowを含むメインDIV）に移動し、次に3番目と4番目に移動します。

私は奇妙な問題に直面しています最初のステップは動作しています（<a>タグの1つを押して、現在のページが消えてページが上にスクロールし、新しいステップが表示されます）。他のすべてのステップは機能しません。 div上部に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つの方法（STEP1でうまく.scroll-me作品を）試した見ることができるように。 ステップ2/3/4が問題で、他のコード（#scroll-me2）でも処理しようとしましたが、うまくいきませんでした。私が.scroll-meと#scroll-me2の両方を持っているという事実に注意を払わないでください。両方を試したことを説明するためだけにあります。

Answer 1

を変更することができ、この

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

}）;

this：

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

}）;

jqueryコードをレンダリングすると、id＃scroll-me2の要素が表示されないため、ここで.click（）を使用できません。