如何滚动到顶部并加载iframe

时间:2018-11-03 17:38:17

标签: html css iframe

我有一个正在查看的书籍的图片库。当有人点击页面上的一本书时,我会在顶部的iframe中定位我的属性以加载该书的评论。

<iframe height="300px" width="100%" src="" name="iframe_reviews"></iframe>

<li class="one_quarter"><a href="b_reviews/book4.html" target="iframe_reviews"><img src="b_reviews/images/book4.jpg"></a></li>

该代码可以正常工作。我遇到的麻烦是页面上有几本书。这意味着您需要向下滚动才能看到书籍,如果您单击某本书,则该书籍会加载到iframe中,但是您无法确定它是否已存在...您仍然停留在页面底部。

单击链接后,是否可以将_top定位为目标,以便将书评加载到iframe中,并使页面同时滚动回到顶部?谢谢。

1 个答案:

答案 0 :(得分:0)

您应该能够使用Javascript函数和DOM属性'scrollTop'进行操作。只需为链接分配一个Javascript函数(使用'onClick'事件,因此在单击链接时调用该函数)即可将该属性设置为0(document.body.scrollTop = 0)。

HTML:

<a href="b_reviews/book4.html" target="iframe_reviews" onclick="scrollToTop()">...</a>

Javascript:

function scrollToTop() {
    document.body.scrollTop = 0;
}

或者,您可以为标签分配一个ID,然后使用功能getElementById。

HTML:

<a href="b_reviews/book4.html" target="iframe_reviews" id="book">...</a>

Javascript:

document.getElementById('book').onclick = function(){
   document.body.scrollTop = 0;
};