javascript - 如何为带有溢出的div的滚动位置设置动画: auto?

Question

我正在尝试创建一个函数，它将给定的 div 或 body 滚动到其中元素的位置。目前看起来像:

function scrollTo($elem, offset, delay, $context){
    delay = delay || 800;
    offset = offset || 0;
    $context = $context || $('html, body');
    $context.animate({
        scrollTop: $elem.offset().top-offset
    }, delay);
}

它在 body 上工作正常，但是，当我给它 $context 时，第一个调用按预期工作，但所有连续调用都滚动到错误的位置。

为什么会出现这种行为以及如何解决它？ FIDDLE

Answer 1

offset().top 测量从页面顶部到元素的距离。

• 当您点击.1时，到页面顶部的偏移距离为300。
• 一旦 .large(现在为 -300)滚动到该位置，.1 偏移量将变为 0 ，.2 变为 300，.3 变为 600。
• 所以需要减去.large的偏移量才能得到真实的位置。

代码

function scrollTo($elem, offset, delay, $context){
    delay = delay || 800;
    offset = offset || 0;
    $context = $context || $('html, body');
    var a = $context.find('.large'); //need this
    $context.animate({
        scrollTop: $elem.offset().top - a.offset().top
    }, delay);
}

这是 jsfiddle https://jsfiddle.net/a8jc5q6r/4/