跳轉到新頁面上的命名錨點-導致偏移的圖像

Question

在我們的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>

我不確定從這里去哪里：-(

Answer 1

從UX連接的緩慢角度來看，圖像加載完成后，屏幕將“跳轉”。 我知道您說過您正在使用平滑滾動來滑動到目標，但是對於某些用戶來說，這仍然感覺像是“跳躍”。 另外，如果圖像需要花費一些時間來加載，則用戶可能在等待時已經開始閱讀頁面上的某些內容，並且在最終平滑單擊滾動條時可能會感到惱火。

因此，一種方法是設置屬性，即使在響應式設計中，您也應該能夠使用相對尺寸而非絕對值來做到這一點，必要時可以借助一些JS幫助。

另一種方法是先加載較小的圖像，然后在用戶單擊或懸停在圖像上時加載較高分辨率的版本。 如今，您可以在許多零售商的站點中看到這一點。