点击并停留在相同的位置，当上述隐藏

Question

演示一些元素：http://jsfiddle.net/My29d/

我有这样的＃1，＃2，＃3，＃4和更多内容...

当我点击readmore＃2，点击readmore＃1，因为隐藏的内容如下扩大和窗口留在相同的位置它的确定。

但是当我点击readmore＃1和scoll内容＃2所以点击readmore＃2

扩展的内容＃1将隐藏和内容＃2将显示全部内容。

所以窗口的位置并不在同一位置的权利留下来吗？

我不知道该怎么办。

也许使用滚动当前扩大元素？

more_btn.on('click', function() { 
    more_btn.show(); 
    more_content.hide(); 
    $(this).hide().next('div').show().css('display', 'inline'); 
}); 

PS：如果这个问题不好unstanding，我很抱歉，并告诉我扩大。

Answer 1

我现在做：

var more_btn = $('div > span'); 
var more_content = $('div > div'); 

more_btn.on('click', function (e) { 
    var $this = $(this); 
    var top = e.pageY - $(window).scrollTop(); 
    more_btn.show(); 
    more_content.hide(); 
    $(this).hide().next('div').show().css('display', 'inline'); 
    $('html, body').scrollTop(
     $this.next('div').offset().top - top 
    ); 

}); 

演示：http://jsfiddle.net/My29d/4/

Answer 2

我不知道如果我明白你到底想要什么，但如果我理解正确那么这可能是你正在寻找：

var more_btn = $('div > span'); 
var more_content = $('div > div'); 

more_btn.on('click', function() { 
    more_btn.show(); 
    more_content.hide(); 
    $(this).hide().next('div').show().css('display', 'inline'); 
    $('html, body').animate({ 
     scrollTop: $(this).parent('div').offset().top 
    }, 500); 
}); 

演示：http://jsfiddle.net/My29d/1/