问题标签 [scrolltop]

我在页面上有几个链接，目的是“到达顶部”，通过使用漂亮的动画将页面滚动到顶部来完成。我注意到，有时当页面滚动时，用户会想要向下滚动，例如，但这是不可能的。屏幕只会断断续续，但会继续动画，直到到达顶部。

如果用户尝试滚动，我想停止动画，因此我编写了以下代码：

这段代码是有问题的，因为 animate() 算作滚动，因此它在停止之前只移动了一点点。

我也尝试过 key-down 作为一个选项，但鼠标滚动没有注册为一个键。

当用户滚动时，有什么方法可以调用我的滚动函数，而不是 animate()？

将鼠标悬停在相应的箭头上时，我试图向上或向下滚动 div。我还希望能够在单击按钮时跳下 div（想想单击窗口滚动箭头而不是拖动滚动条）。

滚动有效，但跳跃无效。scrollTop() 不断地重新调整 0。

这是代码：

我怎样才能让跳跃部分工作？

示例
首先，这是我的代码和问题： http:
//www.nathanstpierre.com/MBX/showoff.html

问题
所以我看到的是，当您单击左侧的按钮时，窗口会滚动到相应的标题。在除 Firefox 之外的所有浏览器中（包括... IE gasp），这都非常流畅。但是，如果您降低窗口的高度，它会在所有计算机上变得平滑。我已经在多台计算机和 IE 7-8、Google Chrome、Safari 和 Firefox 3.5 上尝试过这个。我已经消除了页面上的每一点图形和颜色，所以这些都不是问题。我已经摆脱了跟随你的侧边栏，不是这样。

理论
我认为 jQuery 缓动插件会计算你需要走的距离，然后除以指定的每单位持续时间需要移动的像素数（比如 30 毫秒内 300 像素，所以 10 像素/毫秒） . 其他所有浏览器似乎都可以使这个平滑过渡，但也许是窗口滚动事件提供的粒度没有压缩到足以让 Firefox 使它看起来平滑？或者我使用了错误的缓动插件，或者错误的设置。

编码

逻辑

为 sidenav onClick 上的每个 a 标签添加一个事件侦听器。这将获取文档中与该链接的 href 属性具有相同 ID 的元素的 offset().top，然后从当前的 scrollTop 动画到该元素的 offset().top。逻辑是合理的，并且在除 Firefox 之外的所有浏览器中都能顺利运行......据我所知。

认罪

我究竟做错了什么？这是一个错误吗？

谢谢！

更新

好吧，我不能凭良心选择这里提供的任何答案，因为他们都没有真正解决这个问题，所以如果你遵循这个选择你最喜欢的，赏金将去最高的那个票。

The issue appears to be the way that Firefox a) renders transparency and b) deals with scrolling events. Potentially with enough processor power this is a non-issue, but what makes me sad is that IE (of all browsers) is capable of rendering this fine on inferior hardware. I'll approach Mozilla with the issue and see if they've got anything to say about it.

For extra edification, the following are provided at no charge:

With Transparency
Without Transparency

EDIT: So the question has been answered, but now I can't choose it. Anyone know what's up with that?

FINAL UPDATE Enough time had passed that they let me have the bounty back, so I chose the answer that was correct. It looks like box-shadow and a few other effects cause some scrolling issues in firefox because of the way they render. FF 4.0 + handles this better, but some computers still have issues. This is a great heads up for people implementing CSS3: test the interaction on all browsers and see if the performance costs are justifiable.

我在一个div中有一个gridview ..我想使用jquery从div的底部滚动到div的顶部..任何建议..

我的 gridview 将在其中包含自定义分页生成的链接按钮...我将从链接按钮的底部滚动到 div 的顶部单击...

在javascript的地方，我将调用jquery函数......任何建议......

编辑：

就像每个用户页面的 Stackoverflow 问题...当更改页面编号时，它会以平滑的效果滚动到顶部...我想实现这一点...

I know how to get the scrollTop of a page, I use this simple JS function (code copied around):

This works and my problem is the following: I tried to add it in the page onload event

On page load I get ZERO (which make sense), but the problem is that I get ZERO even if I scroll the page and then reload it without touching the scrollbar.

It seems like the browser does:

1. loads page
2. calls my GetScrolledTop() (so obviously shows ZERO)
3. then scrolls the page to where it was before.

Do you know how to get the scolledTop after the step 3? I mean how to get the scrolledTop AFTER the browser scrolled the page? (maybe without using a timer)

我有以下标记：

Mow 我正在用 jQuery 添加一个新的列表项。如果它被隐藏，我怎样才能使它可见（将 div 滚动到它）？

我试过UL.scrollTop(nuLI.top);了，但没有用。

我正在尝试使用 Jquery 定位绝对 DIV，具体取决于用户在页面上单击的位置。

目前这很好用

这会将元素准确定位在我的鼠标单击屏幕的位置......

直到你向下滚动。这就是为什么我试图实现一些将页面顶部的像素数量考虑在内的东西。我想过这样的事情......

会做的伎俩，不幸的是它不起作用。

有什么提示吗？

谢谢，

蒂姆

我有一个高度：100px 和溢出的 div：自动内容是动态的。

我想滚动底部的 div

我试过了

但如果内容大于 100px $("#chat_content").height() 返回 100 并且 div 不会在底部滚动

我能怎么做？

谢谢

I want to move 4 objects of the DOM when a user scrolls the page.

you can check the page i'm talking about at this address:
http://www.tessuti-arredo.it/new/chi_siamo/rassegna/

as the user scrolls - i'm using $(window).scroll(function() - i check if the window.scrollTop is more than 10 pixels to move some objects. This seems to work fine. but on the ELSE statement (i mean when scrollTop is minor than 10 pixels) - and theese objects should move back to the original position - i have a strange behaviour, especially on two of the 4 objects i move (two fixed objects that i move together calling their class).

maybe it's a bit complicated to explain with my poor english, but if you have a look at the address i posted above it's quite easy to understand, just try to scroll the page.

The objects i want to move are: - a link (a) object contained inside the #header div = $("#header h1 a") - the left sidebar menu called with his id = $("#sidebar") - and two fixed divs, the main horizontal menu and his background, called by their class = $(".moveMenu")

One important last thing: with Firefox it seems to be ok, with all other browsers i have a variable delay that looks like some error on my code.

speaking about my code, here it is:

I know there are some empty callbacks, i just kept them to have it ready to fill with something, i tryed to delete them, nothing is changed.

another thing i tryed is to call the two delaying object with a specific id instead of class but nothing has gone better...

i really hope you will find some error in my coding, i know i'm not so good.

使用我的代码，我可以让一个 div 滚动浏览 4 个图像，但是如果您查看代码，我必须继续添加“.next”以使其滚动到另一个图像。我不想确定要在 jquery 中滚动的图像数量，我希望 jquery 继续在 div 中查找尽可能多的图像，滚动浏览所有图像，然后滚动回顶部。看看我的代码。我不想使用另一个插件，因为与多 KB 插件相比，我几乎已经用几行代码完成了我想做的事情。

ps：我不知道为什么'-165px'是必要的，但是当从图片滚动到图片时它可以完美对齐。

查询：

查询：

有任何想法吗？