如何滚动到顶部并加载 iframe

Question

我有一个我正在查看的一些书籍的图片库。当有人点击页面上的一本书时，我在顶部有一个 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 中并且页面同时滚动回顶部？谢谢你。

Answer 1

您应该能够使用 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;
};