Javascript 调用jQuery'；时，在视口中保持单击链接；s-slideUp函数

我在一个页面上多次重复以下html结构：

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

但是我希望确保您刚才单击的链接保持在视图中并尽可能少地移动。当前，在页面中间单击链接会导致链接在其上方的div关闭时向上移出视口

是否有一种优雅的方式可以保持在视口中单击的链接

更新： 到目前为止，我已经尝试了建议的答案，但到目前为止，没有一个完全有效（例如，单击每个线索中的链接编号30，链接编号30在视口之外结束）

• Herman先生的解决方案：
• 莫森的解决方案：
• roXon的解决方案：

---

您需要修改页面的scrollTop属性，以使内容保持原位。幸运的是，当元素收缩时，它们将触发您可以钩住的滚动事件

//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);
  }
});

小提琴：

最简单的方法：

将内容包装到动态生成的div中。 首先对内容进行动画制作， 然后设置包装器元素的动画

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

$（'.expanded'）.wrapInner（''）；
$（'.expanded'）。每个（函数（）{
$（this）.height（$（this）.children（'.wrapper'）.height（））；
});
$（'.closeExpanded'）。单击（函数（e）{
e、 预防默认值（）；
$（'.wrapper'）.animate（{height:'0px'}，800，function（））{
$（'.expanded'）。slideUp（800）；
});
});

请您确切地解释一下什么让您烦恼？！是否要自动滚动页面以使链接可见？@roXon它重复多次，因此更像是这样：许多“关闭所有”链接都会在视口之外结束-例如，如果单击中间附近的一个链接。我想他希望链接在叮当响后保持在那里，而不是向上移动。这是一个定位问题@pimvdb-是的，没错。我可以等到所有的幻灯片完成，然后滚动到正确的位置，但这看起来很不优雅。这是近距离看小提琴（感谢小提琴btw）-一件事，我认为将是奇怪的，不管是什么，如果一切收缩如此之大，链接必须向上。ie-没有空间使用滚动来保持它的位置。您可以通过向文档添加最小高度来强制存在空间。我在我的一个网站上这样做，用户可以滚动到一个锚。如果你对此感兴趣，请让我知道，我会找出我使用的代码。

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

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