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

问题描述

我在砌体布局中有一组缩略图,每个缩略图都链接到画廊页面。我想返回显示被点击图像的滚动状态。我正在使用图库上的关闭按钮将哈希值添加到地址,然后我使用该地址滚动到图像。代码总是只选择要滚动的 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

标签: jqueryscrollanchorscrolltopmasonry

解决方案


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


推荐阅读