title: jQuery - How to scroll an anchor to the top of the page when clicked?
body: <p>I have a list of links in <code>div</code> elements and I am using dropcontent.js to load content into another <code>div</code> when a link is clicked. I would now like to add some code which scrolls the clicked link to the top of the browser window.</p>
  
  <p>HTML is like this for each item in the list:</p>
  
  <pre><code>&lt;div class="work"&gt;
      &lt;h3&gt;&lt;a class="scroll" href="project2.html"&gt;Project 2&lt;/a&gt;&lt;/h3&gt;
      &lt;div class="projectIntro"&gt;
          &lt;p&gt;This is some intro text for project 2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="pictures"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have found tutorials for scrolling to an ID when a link is clicked (by making the href the ID of the div you want to scroll to - unfortunately I can't do this as my href is actually a separate html page even though it is using dropcontent to load it into the current page. </p>
  
  <p>I also found a tutorial for scrolling to a particular ID on page load, but none that simply say when an anchor of a given class is clicked, scroll it to the top of the browser window.</p>
  
  <p>Can someone help me out with this one please? thanks.</p>
  
  <p>UPDATE:</p>
  
  <p>I have got the scroll working using the following code:</p>
  
  <pre><code>$('.work a').click(function() {
           $('html,body').animate({scrollTop: $(this).offset().top}, 500);
           }); 
  </code></pre>
  
  <p>However, my dropcontent.js is no longer working... I think because I have 2 functions occuring on the same click... I would like the content to load first, then scroll.</p>
  
  <p>here is my dropcontent.js</p>
  
  <pre><code>$('.work a').click(function(event) {
  event.preventDefault();
  
  var parent = $(this).parents(".work");
  var content_holder = parent.children(".pictures");
  
  if (parent.hasClass("selected_work")) {
    close_other();
    return;
  }
  
  close_other();
  
  parent.addClass("selected_work");
  content_holder.load(this + " #content .work");
  
  $('.selected_work img').attr("src", "images/arrow_close.gif");
  
  });
  
  
  function close_other() {
  
  var selected_work = $('.selected_work');
  
  selected_work.children('.pictures').empty();    
  $('.selected_work img').attr("src", "images/arrow_open.gif");
  selected_work.removeClass("selected_work")
  }
  
  });
  </code></pre>
  
  <p>So now I just need to integrate these 2 bits of code to get them working together... so far no I have had no luck doing this - if I add the scroll (animate) function, the load function stops working...</p>
  
  <p>UPDATE 2</p>
  
  <p>Turns out it was something else which was causing the problem - I now have it working!</p>