如何使用溢出：自动对div的滚动位置进行动画处理？

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

它在主体上运行良好，但是，当我给它$ context时，第一个调用按预期运行，但是所有连续调用都滚动到错误的位置。

为什么会出现这种现象以及如何解决？ 小提琴

Answer 1

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

• 单击.1 ，到页面顶部的偏移距离为300 。
• 一旦将现在-300 .large滚动到该位置， .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/