保持页面垂直固定在一个元素上，当上面显示大量内容时（因此导致滚动）

Question

我有一个很长的页面，里面有很多隐藏内容的数据表。

它们是隐藏的，因为它们非常重复，因此并非所有用户都希望一直滚动过去。

经常在页面下方有一个选项，单击以打开所有隐藏的数据表。

问题是，如果您向下移动到页面一半并单击以打开表格，则当前视图上方显示的所有内容都会导致页面向下滚动，这意味着用户会迷失方向他们在页面上。

我在这里模拟了这个问题。如果您向下滚动到靠近页面底部的 "show more" link 之一，您就会明白我的意思。 http://jsfiddle.net/LnubwdzL/

我希望被点击的 link 在光标下保持静止，以便用户知道它们在哪里。

这种解法：

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

...从关于 SO 的其他问题来看，似乎并没有解决它。即使它最终出现在正确的位置，页面在停止之前仍然移动了很多。

Answer 1

如果我理解正确并且正如我在评论中提到的那样，我认为您可以为 slideDown(); 和 animate() 函数设置相同的 duration 值，并让它们都在同一个 click 处理程序中。

您的代码可能会变成：

$('a').on('click', function(e){
    e.preventDefault();
    if($('.hide').length>0){$('html, body').animate({scrollTop:$(this).offset().top},400);}
    $('.hide').hide().removeClass('hide').slideDown(400);
});

希望这对您有所帮助。

更新 #1： 在 animate() 之上添加了一个检查，因此当不再存在 $('.hide') 元素时它不会动画。

更新#2： 看看这个 resulting fiddle 的另一个实验。让我知道这是否是您要找的。

其工作方式是：

单击 anchor 后，第一个单击的元素是 offset().top 存储在名为 prevOffset.
当前 $(window).scrollTop() 值也存储在一个名为 scrollTop.
然后所有 .hide 元素通过 $('.hide').show(); 暂时可见。
同一个点击元素的另一个 offset().top 然后存储在一个名为 currOffset.
所有 .hide 元素通过 $('.hide').hide(); 再次变为不可见。
scrollTop 然后被动画化为计算如下的值：scrollTop+(currOffset-prevOffset).
所有 $('.hide') 个元素都通过 slideDown() 动画。

JavaScript:

var duration=400,hideElements=null,scrollTop=0,prevOffset=0,currOffset=0;
$('a').on('click',function(e){
    e.preventDefault();
    hideElements=$('.hide');
    if(hideElements.length>0){
        scrollTop=$(window).scrollTop();
        prevOffset=$(this).offset().top;
        hideElements.show();
        currOffset=$(this).offset().top;
        hideElements.hide();
        $('html, body').animate({scrollTop:scrollTop+(currOffset-prevOffset)},duration);
        hideElements.removeClass('hide').slideDown(duration);
    }
});

希望这就是您要找的。

保持页面垂直固定在一个元素上，当上面显示大量内容时（因此导致滚动）

Keeping the page vertically fixed on an element, when lots of content is revealed above (so causing scroll)

javascript

jquery

jquery-animate