title: How to scroll to an element which has dynamic id using jquery
body: <p>I have done this functionality in a static way but how can i do this scroll using jquery so that it will smoothly scroll to the particular element which id i have added dynamically.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [{"name": "Aruba", "code": "A"},{"name": "AndorrA", "code": "A"},{"name": "Bhutan", "code": "B"},{"name": "Bolivia", "code": "B"}]
  var num=0;
  $.each(data, function(key, val) {
      if (!$("#aZContent ul." + val.code).is("*")) {
       $("&lt;ul /&gt;", {"class": val.code,"html": "&lt;li&gt;"+ val.name + "&lt;/li&gt;"}).appendTo("#aZContent").before('&lt;b class=' + val.code + ' id="letter_' + num++ + '"&gt;' + val.code + '&lt;/a&gt;&lt;/b&gt;');
   } else {
    $("b." + val.code).each(function() {
        if (this.textContent === val.code) {
      $(this).next("ul").append("&lt;li&gt;" + val.name + "&lt;/li&gt;");
     }
       });
   }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="alphabet" id="alphaTab"&gt;
   &lt;a href="#letter_0"&gt;A&lt;/a&gt;
   &lt;a href="#letter_1"&gt;B&lt;/a&gt; 
  &lt;/div&gt;  
  &lt;div id="aZContent"&gt;
   &lt;ul&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;div style="height:500px"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>On Click of link 'A' it should scroll to the "A" and likewise </p>