Question

我搜索得太多但没找到解决我问题的任何有效答案。如图所示，我想滚动/显示所选div（点击时）到iframe顶部。我尝试使用来自http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll的jquery scrolltop但是代码对我不起作用，因为它适用于id而我在div中有类。但是，我编辑代码以使用类，但是，当我运行代码时，href =“＃0”表现得像url地址，当我点击div时没有任何反应。他们可以用任何方式用另一个标签替换“a”标签来解决问题。

这是我在Dbimage.php页面上的源代码：

  <!DOCTYPE html>
   <html>
     <head>
   <script>
          $(document).ready(function(){
          $(".ScrollTop").on('click', function(event) {
          if (this.hash !== "") {
           event.preventDefault();
           var hash = this.hash;
          $('html, body').animate({
           scrollTop: $(hash).offset().top
          }, 800, function()
           {
         // Add hash (#) to URL when done scrolling (default click behavior)
         window.location.hash = hash;
     });
  } // End if
  });
  });
  </script>

 <style>
  body, html
  {
     height: 100%;
   }
  .GalleryContentDiv 
  {
     min-height: 300px;
  }
  </style>

  </head>
    <body>

 <a class="ScrollTop" href="#0"> 
  <div class="GalleryContentDiv" id="#0" style="border:1px solid transparent; margin-top:30px; ">

     <!-- contents for great cities 1-->
      </div><br>
  </a> 
     <a  class="ScrollTop" href="#1">
  <div class="GalleryContentDiv" id="#1" style="border:1px solid transparent; margin-top:30px; ">

     <!-- contents for nature 2-->
     </div><br>
     </a>
    </body>
   </html>

这是我的iframe代码：

<iframe id="iframe-Db-Gallery"
 src="http://localhost/HtmlFormGallery/DbImage.php"
 style="width: 95%;height: 350px;margin-left: 4%;" marginheight="0"  > 
</iframe>

有任何解决方案吗？

Answer 1

嗯，我仍然不确定你要做什么......

但是如果没有id的div是问题而且iframe中的页面与Dbimage在同一个域中，那么你可以等到iframe加载并动态地为每个gallery div添加一个id。

我头脑中未经考验的例子：

document.getElementById('iframe-Db-Gallery').onload= function() {
    //get document of iframe
    var iframeDocument = document.getElementById('myframe').contentWindow.document;
    //find gallery div's within that iframe
    var iGalleries = $(iframeDocument).find(".GalleryContentDiv");

    $.each(iGalleries, function(index, item){
        //loop through each gallery div and give it an id
        $(item).attr("id", "gallery_" + index);
    });

};

Answer 2

所以，我知道实际问题是什么，

相反，

<a class="ScrollTop" href="#0"> 
 <div class="GalleryContentDiv" id="#0">

我想使用喜欢，

<a class="ScrollTop" href="#'.$id.'">

 <div class="GalleryContentDiv" id="'.$id.'">

＃仅用于href。

$ id = 0,1,2,3等。它现在在我的php页面中正常工作。

如何在点击时将特定div滚动到iframe顶部？

2 个答案: