关闭 Colorbox 时，页面会向上移动一点

Question

在用户看到网站之前，我使用 Colorbox 提供警报。 Colorbox 正在使用 iframe 显示 HTML 页面。与 Colorbox 附带的常用按钮不同，我有一个关闭按钮作为由 Colorbox 显示的 HTML 页面的一部分。这很好用，但是当按下关闭按钮并关闭 Colorbox 时，下面的页面（索引页面）会向上移动一点。

我寻找任何会导致这种情况的东西，但没有运气。

这是现场直播：

http://safespacetn.org/

这是 index.html 页面中的脚本：

<script>
    $(document).ready(function(){
    $(".group1").colorbox({open:true});
    $(".iframe1").colorbox({
        iframe:true, 
        transition:"fade",
        closeButton:false,
        width:"90%", 
        height:"90%", 
        maxWidth: '900px',
        maxHeight: '',
        open:true, 
        onOpen: function(){$("#colorbox").css("opacity", 0);}});
    });
</script>
<script>
    jQuery(document).bind('cbox_open', function() {
        $.colorbox.resize();
        jQuery('body').css({ overflow: 'hidden'});
    }).bind('cbox_closed', function() {
        jQuery('body').css({ overflow: 'auto' });
    });
</script>

这是我用来从 iframe 关闭 Colorbox 的代码：

<a href="#" onclick="parent.$('.iframe1').colorbox.close();" id="close_alert"><button class="button2 fontvag400">Close</button></a>

我不经常使用 StackOverflow，如果我没有正确提出问题，请原谅我。

Answer 1

我发现问题是由关闭按钮 a 元素中的 href="#" 属性引起的，它触发了滚动页面的锚点。尝试用<button type="button"> 元素替换<a> 元素或删除href 属性。