title: jQuery ScrollTO with data attributes
body: <p>I really need help with this issue, my knowledge with JS is not that good. So, basically I want to scroll to the section when the link is clicked, but not through (href="#target"), I want to do it with attributes. Also, I want to add attribute offset from top as well if it is possible. Please take a look at the code, you will get a clearer picture.</p>
  
  <p>HTML Example:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;a href="#" data-attr-scroll="#section1" class="scrollto"&gt;Section 1&lt;/a&gt;
      &lt;a href="#" data-attr-scroll="#section2" class="scrollto"&gt;Section 2&lt;/a&gt;
      &lt;a href="#" data-attr-scroll="#section3" class="scrollto"&gt;Section 3&lt;/a&gt;
      &lt;a href="#" data-attr-scroll="#section4" class="scrollto"&gt;Section 4&lt;/a&gt;
      &lt;a href="#" data-attr-scroll="#section5" class="scrollto"&gt;Section 5&lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div class="test" id="section1"&gt;
      #1 Section
  &lt;/div&gt;
  &lt;div class="test" id="section2" data-scroll-offset="100"&gt;
      #2 Section
  &lt;/div&gt;
  &lt;div class="test" id="section3"&gt;
      #3 Section
  &lt;/div&gt;
  &lt;div class="test" id="section4" data-scroll-offset="200"&gt;
      #4 Section
  &lt;/div&gt;
  &lt;div class="test" id="section5" data-scroll-offset="300"&gt;
      #5 Section
  &lt;/div&gt;
  </code></pre>
  
  <p>JS example:</p>
  
  <pre><code>    jQuery(document).ready(function($) {
          $(".scrollto").click(function(event) {
              event.preventDefault(); 
  
              var defaultAnchorOffset = 0;
  
              var $anchor = $(this).attr('data-attr-scroll');
  
              var anchorOffset = $anchor.attr('data-scroll-offset');
              if (!anchorOffset)
                  anchorOffset = defaultAnchorOffset; 
  
              $('html,body').animate({ 
                  scrollTop: $anchor.offset().top - anchorOffset
              }, 500);        
          });
      });
  </code></pre>
  
  <p>CSS example:</p>
  
  <pre><code>    nav {
          position: fixed;
          top: 20px;
          right: 20px;
      }
      .test {
          height: 500px;
      }
  </code></pre>
  
  <p>I know that JS code is bad. If anyone can help me, I would be very grateful.</p>
  
  <p>Thank you in advance.</p>
  
  <p>Regards,
  Danny</p>
  
  <p><strong><a href="http://jsfiddle.net/DannyK/JcEb3/" rel="noreferrer">Fiddle Demo</a></strong></p>