title: Scroll to element using data-attributes
body: <p>I'm trying to figure out how I can have the element scroll to a particular element using data-attributes if it matches the ID instead of using anchor tags. Here is what I'm working. </p>
  
  <p>Once the user clicks on a button it will show the content and also scroll to that particular element that matches the data-attributes. I can't seem to make it scroll </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="post" data-id="content-one"&gt;
          post one
      &lt;/div&gt;
      &lt;div class="post" data-id="content-two"&gt;
          post two
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container-two"&gt;
      &lt;div id="content-one" class="post-content" &gt;
        content one
      &lt;/div&gt;
      &lt;div id="content-two" class="post-content" &gt;
        content two
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>$(".container .post").on('click', function() {
      var data_id = $(this).data('id');
      $('.post-content').each(function() {
          var el = $(this);
          if (el.attr('id') == data_id)
              el.show();
          else
              el.hide();
      });
      $('html, body').animate({
          scrollTop: $(data_id).offset.top()
      }, 'slow');
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/clestcruz/vf4ufg6b/" rel="nofollow">https://jsfiddle.net/clestcruz/vf4ufg6b/</a></p>