Keep clicked link in viewport when calling jQuery's slideUp function

I have the following h开发者_StackOverflow中文版tml structure repeated multiple times on a page:

<div class="item">
    <div class="header">
        ...
        <a href="#" class="closeExpanded">Close All Expanded</a>
    </div>
    <div class="expanded">
        ...
    </div>
</div>

And some jQuery to close all the divs with class expanded when the link is clicked:

$('.closeExpanded').click(function(e){
    e.preventDefault();
    $('.expanded').slideUp('slow');
});

However I want to ensure that the link you've just clicked remains in view and moves as little as possible. Currently clicking on a link halfway down the page causes the link to move up out of the viewport as divs above it are closed.

Is there a nice graceful way I can keep the link that's been clicked in the viewport?

Update: I've tried the answers suggested so far but so far none completely work (e.g. clicking link number 30 in each of these leads to link number 30 ending up outside of the viewport)

• mrtsherman's solution: http://jsfiddle.net/Qan5p/38/
• Mohsen's solution: http://jsfiddle.net/Qan5p/39/
• roXon's solution: http://jsfiddle.net/Qan5p/40/

---

You will need to modify the scrollTop property of the page to keep things in place. Fortunately, as elements are shrunk they will be triggering scroll events you can hook into.

//untested, but should look something like this
var linkPosition = null;

$('.closeExpanded').click(function(e){
  e.preventDefault();
  linkPosition = $(this).offset().top - $(document).scrollTop();
  //in callback to slideUp clear linkPosition so that we know to stop tracking scroll events
  $('.expanded').slideUp('slow', function() {
      linkPosition = null;
  });
});

$(document).scroll( function(){
  //check to see if we should be keeping link on screen
  if (linkPosition != null) {
     //keep the link in position
     //I'm not so sure about this bit of the code, but I think you get the idea. All you have to do 
     //is properly calculate the new offset to keep the link looking like it is in the same position
     var newPos = $(document).scrollTop() + linkPosition;
     $(document).scrollTop(newPos);
  }
});

---

$('.closeExpanded').click(function(e){
    e.preventDefault();
    $('.expanded').css({
        'position' : 'absolute', // make it position absolute to prevent moving
        'left' : $(this).offset().left,
        'top' : $(this).offset().top 
    }).slideUp('slow', function(){
      $('.expanded').css('position', 'static');
});
});

Fiddle: http://jsfiddle.net/mohsen/Qan5p/10/

---

WORKING DEMO

The easiest way:

Wrap contents into dynamically generated divs. First animate the contents, Than animate the wrapper elements

$('.expanded').wrapInner('<div class="wrapper" />');
$('.expanded').each(function() {
    $(this).height($(this).children('.wrapper').height());
});

$('.closeExpanded').click(function(e) {
    e.preventDefault();
    $('.wrapper').animate({height: '0px'}, 800, function() {
        $('.expanded').slideUp(800);
    });
});