跳转到新页面上的命名锚点 - 导致偏移的图像答案

【问题标题】：Jump to named anchor on new page - images causing offset跳转到新页面上的命名锚点 - 导致偏移的图像
【发布时间】：2015-03-11 09:39:21
【问题描述】：

在我们的 WordPress 网站上，我们的侧边栏中有一些链接可以在同一网站上加载新页面。所有侧边栏链接都指向不同的页面。

我为链接目标添加了一个哈希名称，以便在新页面加载时我们可以将用户带到目标页面的特定部分。

问题是，页面包含一些图像，这些图像会在图像加载后导致目标位置发生偏移。我在 jQuery 的 document.ready 函数中使用以下行来等待页面（或问题图像）加载，然后平滑滚动到锚点，但它不起作用……

jQuery(document.body).scrollTop(jQuery('#stockistDetails').offset().top);

我使用的链接文本看起来像……

http://findyourdreamdress.co.uk/dresses/lillian-west/6343-lillian-west/?stockist_id=1393#stockistDetails
http://findyourdreamdress.co.uk/dresses/lillian-west/6343-lillian-west/?stockist_id=1132#stockistDetails

在目标页面上，我有一个看起来像……的锚点

<a name="stockistDetails" id="stockistDetails"></a>

我不知道从这里去哪里：-(

【问题讨论】：

不要使用$(document).ready()试试：$(window).load( "article.html #target" );
如果需要固定大小或在window.onload事件中设置逻辑，则为所有图像设置属性宽度和高度
这是一个响应式布局 - 我不确定是否可以设置固定属性？

标签： javascript jquery html wordpress hyperlink

【解决方案1】：

从用户体验的角度来看，连接速度很慢，当图像完成加载时，屏幕会“跳跃”。我知道您说过您正在使用平滑滚动来滑行到目标，但对于某些用户来说，这仍然感觉像是“跳跃”。另外，如果图像需要一些时间来加载，用户可能已经在等待时开始阅读页面上的内容，并且当您最终平滑滚动点击时可能会感到恼火。

因此，一种方法是设置属性，即使在响应式设计中，您也应该能够使用相对尺寸而不是绝对尺寸来做到这一点，如果需要的话，也许可以借助一些 JS 帮助。

另一种方法是先加载较小的图像，然后在用户单击或将鼠标悬停在图像上时加载更高分辨率的版本。您现在可以在许多零售商的网站上看到这一点。

【讨论】：