Question

我正在使用jQuery animate函数在div内部进行平滑滚动，但是当您在顶部滚动时此功能才能正常工作。在许多控制台登录标签的位置和小时试图解决这个问题之后，我知道为什么会这样。这是由于滚动时溢出内部元素的位置发生了变化。

问题是当你点击其中一个标签时，如果div被滚动到顶部，它只会滚动到正确的位置，但是如果div在任何地方但顶部没有这样做。例如，如果你单击第4个标签，然后立即点击第3个标签，当你点击3时它不会转到正确的位置，因为你没有滚动到顶部。无论滚动位置如何，我无法想出正确的等式或其他东西来使div滚动到正确的标签。这是动画的简单代码，其余部分在jsfiddle

上

$('#iddescription').animate({
    scrollTop: target.position().top - $('#iddescription').position().top
 }

我确实考虑过双动画首先滚动到顶部，然后滚动到正确的位置，但这不是我想要的。

有人可以帮助我而不使用jQuery插件，这里是代码https://jsfiddle.net/509k8stu/3/。

Answer 1

将Book1设置为以下位置似乎可以解决问题：

scrollTop

我还建议您使用target.offset().top + $('#iddescription').scrollTop() - $('#iddescription').offset().top方法中止以前的滚动动画。所以你的完整动画方法看起来像这样：

.stop()

查看this updated fiddle

中的结果

Answer 2

您需要获取当前的滚动顶部，然后像这样添加element.position.top（）：

    // Does a scroll target exist?
    if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        var $currScrollTop = $("#iddescription").scrollTop();
        $('#iddescription').animate({
            scrollTop: $currScrollTop + target.position().top - $('#iddescription').position().top
        }, 1000, function() {

        });
    }

Here is a fiddle.

ScrollTop并不总是在div中找到正确的位置

2 个答案: