javascript - anchor 链接与浏览器重绘

Question

我正在构建一个网站，其中包含一个包含不同部分的长主页。我正在尝试在主页上使用 anchor 标记，这样当您从其他页面链接到它时，您会直接转到正确的部分。

它最初转到正确的部分，但是当加载图像和 facebook 和 pinterest 插件时，它们将内容向下推。

我读到您可以通过内联声明图像尺寸来避免这种情况。除了我的网站是响应式的，所以图像需要流畅。有解决办法吗？

如果这是不可能的，javascript 解决方案也是可以接受的。现在主页菜单使用 jquery 滚动到正确的部分。有没有办法将访问者发送到主页，等待它加载，然后使用相同的脚本滚动到某个部分？

编辑: 我找到了答案，有点。我得到了以下答案:https://stackoverflow.com/a/9805747/1948221

但该脚本在我的社交插件加载之前跳转，导致我最初描述的相同问题。如果我向 setTimeout 函数添加一些超时，页面将有时间完全加载并且一切正常。唯一的问题是加载时间变化很大，所以不可能每次都正确。

有什么帮助吗？

Answer 1

我不会向您推荐不使用 javascript 的解决方案。由于您已使用 jQuery 标记您的答案，我想您会对这个流畅的 example 感到满意。 .

你可以在 here 找到它的解释.

更新#1

I read that you can avoid this by declaring image dimensions inline. Except that my site is responsive so the images need to be fluid. Is there a way around this?

我会说，如果您将图像尺寸声明为内联，您会采取最好的方法。
使用 javascript 库对响应式设计使用react。我认为这是一个可以接受的解决方法。

也许您有兴趣使用 Device.js ( Github/Demo ) 来对不同的设备使用react。