When closing Colorbox, the page shifts up a bit [SOLVED]-CodePudding

I use Colorbox to provide an alert before the user sees the site. Colorbox is displaying an HTML page using iframe. Instead of the usual button that comes with Colorbox, I have a close button as part of the HTML page that is being displayed by Colorbox. This works fine, but when the close button is pressed, and Colorbox closes, the page underneath (the index page) shifts up a bit.

I looked for anything that would cause this and had no luck.

Here is the live site:

http://safespacetn.org/

Here is the script from the index.html page:

<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>

Here is the code I use to close Colorbox from the iframe:

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

I don't use StackOverflow often, forgive me if I haven't asked the question correctly.

CodePudding user response：

I found the issue was caused by the href="#" attribute in your close button a element, which trigger the anchor that scrolling the page. Try replace <a> element with <button type="button"> element or remove the href attribute.