title: How to scroll up or down the page to an anchor using jQuery?
body: <p>I'm looking for a way to include a slide effect for when you click a link to a local anchor either up or down the page.</p>
  
  <p>I'd like something where you have a link like so:</p>
  
  <pre><code>&lt;a href="#nameofdivetc"&gt;link text, img etc.&lt;/a&gt;
  </code></pre>
  
  <p>perhaps with a class added so you know you want this link to be a sliding link:</p>
  
  <pre><code>&lt;a href="#nameofdivetc" class="sliding-link"&gt;link text, img etc.&lt;/a&gt;
  </code></pre>
  
  <p>Then if this link is clicked, the page slides up or down to the required place (could be a div, heading, top of page etc).</p>
  
  <hr>
  
  <p>This is what I had previously:</p>
  
  <pre><code>    $(document).ready(function(){
      $(".scroll").click(function(event){
          //prevent the default action for the click event
          event.preventDefault();
  
          //get the full url - like mysitecom/index.htm#home
          var full_url = this.href;
  
          //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
          var parts = full_url.split("#");
          var trgt = parts[1];
  
          //get the top offset of the target anchor
          var target_offset = $("#"+trgt).offset();
          var target_top = target_offset.top;
  
          //goto that anchor by setting the body scroll top to anchor top
          $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
      });
  });
  </code></pre>