ScrollTop 在砌体图像缩略图中找不到几个不同的数字元素 ID 之一以将页面滚动到图像

Posted 2023-05-07

【中文标题】ScrollTop 在砌体图像缩略图中找不到几个不同的数字元素 ID 之一以将页面滚动到图像

【英文标题】：ScrollTop Not finding one of several different numeric element ids in masonry image thumbnails to scroll page to the image

【发布时间】：2021-07-30 16:17:26

【问题描述】：

我有一组砌体布局的缩略图，每个缩略图都链接到一个画廊页面。我想返回显示被点击图像的滚动状态。我正在使用图库上的关闭按钮向地址添加哈希值，然后我使用该地址滚动到图像。代码总是只选择要滚动的 div 的第一个实例。如果我包含一个可点击的链接，页面会正确滚动。

html

<div class="item">
  <div id="photo_335"  class="anchor"></div>
    <a href="gallery.php?gallNo=335&catNo=14"><img src="images/gall335.jpg" </a>                                
  </div>                                                                            
  <div class="item">
    <div id="photo_332"  class="anchor"></div>
    <a href="gallery.php?gallNo=332&catNo=14"><img src="images/gall332.jpg"></a>                                                                
  </div>                                        
  <div class="item">
    <div id="photo_323"  class="anchor"></div>
    <a href="gallery.php?gallNo=323&catNo=14"><img src="images/gall323.jpg"></a>
  </div> 

脚本

var $hash = window.location.hash;
var $photo = "photo_" +$hash.replace('#', '');
if ($hash.length) 
    $('html, body').stop().animate(
            scrollTop: $($target).offset().top - headerHeight
        , 10);     
        return false;
 

site.com/test.php?catNo=14#337

【参考方案1】：

好的解决了我的问题。我在布局完成之前触发了脚本。 console.log( $('#'+$photo).offset() ); 给了我 div 的位置并帮助我实现了这一点。