gpt4 book ai didi

javascript - 单击时如何将特定的 div 滚动到 iframe 的顶部?

转载 作者:行者123 更新时间:2023-11-28 05:30:45 27 4
gpt4 key购买 nike

我搜索了太多但没有找到任何解决我问题的有效答案。如图所示,我想将选定的 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>

有什么解决办法吗?

Great cities 1 div Great cities 1 div

最佳答案

嗯,我还是有点不确定你想做什么..

但是如果没有 id 的 div 是问题所在并且 iframe 中的页面与您的 Dbimage 位于同一域中,那么您可以等到 iframe 加载并动态地向每个画廊 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);
});

};

关于javascript - 单击时如何将特定的 div 滚动到 iframe 的顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38523418/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com