为什么.anan在动画制作之前会将scrollTop跳转到0？ [英] Why does .animate to scrollTop jump to 0 before animating?

问题描述

我正在使用Parallax滚动，就像在那个网站上一样。所以我一直在使用 scrollTop 来确定用户在页面上的垂直位置然后我一直在调整元素的位置基于对该值的更改。

I am playing with Parallax scrolling like on that nike site. So I have been using scrollTop to determine the user's vertical position on the page and then I've been adjusting element's positions based on the changes to that value.

这里我舍入scrollTop值并记录它。我稍后会显示日志。

Here I round the scrollTop value and log it. I'll show the log later.

var distance = 60*(Math.round($(window).scrollTop()/60));
console.log(distance);

然后，点击后，我调用此函数滚动到我传递给它的scrollTop值。

Then, on click, I call this function which scrolls to the scrollTop value that I've passed it.

function goTo(n){
    console.log('begin animating');
    $('html,body').animate({scrollTop: n},2000);
}

这是问题，在动画制作之前，滚动顶部值会跳转到0。

Here's the problem, the scroll top value jumps to 0 before animating.

所以我会在页面的中间位置记录下来：

So I'll be halfway down the page and it logs:

begin animating
0
6240
6180
6120
// etc...

我定位东西的方式依赖于scrollTop值的准确性。所以我的问题是：

The way I'm positioning stuff relies on the accuracy of the scrollTop value. So my question is:

如何在动画完成之前让scrollTop值跳到0？

How can I keep the scrollTop value from jumping to 0 before going through with the animation?

让我知道是否需要更多信息。

继承人网站的实时版本： http://theblueeyeguy.com/moon/Illumination/

Let me know if theres any more info needed.
Heres the live version of the site: http://theblueeyeguy.com/moon/Illumination/

（点击下一步然后上一步打破它）

(click 'Next' then 'Prev' to break it)

推荐答案

可能是因为您使用的链接 href =＃。

Probably because you're using a link with href="#".

将返回false; 添加到 onclick 属性。

<a href="#" onClick="goTo(2160);return false;">< Prev | </a>

这篇关于为什么.anan在动画制作之前会将scrollTop跳转到0？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！