jQuery - How to scroll an anchor to the top of the

I have a list of links in div elements and I am using dropcontent.js to load content into another div 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.

HTML is like this for each item in the list:

<div class="work">
    <h3><a class="scroll" href="project2.html">Project 2</a></h3>
    <div class="projectIntro">
        <p>This is some intro text for project 2</p>
    </div>
    <div class="pictures"></div>
</div>

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.

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.

Can someone help me out with this one please? thanks.

UPDATE:

I have got the scroll working using the following code:

$('.work a').click(function() {
         $('html,body').animate({scrollTop: $(this).offset().top}, 500);
         });

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.

here is my dropcontent.js

$('.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")
}

});

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...

UPDATE 2

Turns out it was something else which was causing the problem - I now have it working!

回答1:

Here is how you scroll the link to the top:

$('.work a').click(function() {
     $('html,body').animate({scrollTop: $(this).offset().top}, 500);
});

回答2:

This answered question linked below is closely related and good info for all people that like to be able to

scroll the page to a certain element, div id
have that element scroll to the the top of the page by clicking an anchor from that element
have that element scroll to the the top of the page by clicking the actual div id containing all the anchor links; "click catcher div"

Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id

回答3:

Not a direct answer to your question, but a good reference that you may want to use.

http://demos.flesler.com/jquery/scrollTo/

The jQuery scrollTo plugin lets you scroll to any anchor <a> in your page. If you just place an anchor on top of your window, you can use scrollTo to go there directly with an animation.