单击后，jQuery Fix页面滚动到顶部

Question

Im just building a basic lightbox type plugin to suit the needs of a project im building. It basically just allows the user to click on an image on the page and the image appear in the lightbox, the problem is when i click on the close button on the lightbox,the script causes the window to shoots to the top of the page.

This is unwanted behavior because if i have been scrolling on 1000+ pictures for example i wouldnt want it to just undo all that scroll just by closing a picture.

Here is my fiddle: https://jsfiddle.net/w407wdrv/

Here is my code:

<style>
    body, html {
        padding: 0;
        border: 0;
        margin: 0;
    }
    .flavius-modal-bg {
        display: none;
        position: fixed;
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .flavius-img-section {
        background: rgba(255,255,255,0.8);
        height: 80%;
        width: 80%;
        margin: 0 auto;
        text-align: center;
        z-index: 100;
    }
    .flavius-options-section {
        background: white;
        height: 20%;
        width: 80%;
        margin: 0 auto;
    }
    .flavius-img-preview {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        min-width: 500px;
        width: 500px;
        max-height: 100%;
    }
</style>

<div class="flavius-modal-bg">
    <div class="flavius-img-section">
        <img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt="">
    </div>
    <div class="flavius-options-section">
        <a class="close-modal-bg" href="#">Close Me</a>
        <a href="#">Some button clicked</a>
    </div>
</div>

<img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt="">
<img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt="">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $('img').on('click', function(){
        var currentImg = $(this).attr('src');
        $('img.flavius-img-preview').attr('src', currentImg);
        $('.flavius-modal-bg').css('display', 'block');
    });

    $('.close-modal-bg').on('click', function(){
        $scrollTop = $('body').scrollTop();
        $('.flavius-modal-bg').css('display', 'none');

        setScrollPosition($scrollTop);
    });

    function setScrollPosition($scrollTop)
    {
        $('body').scrollTop($scrollTop);
    }
</script>

Answer 1

You can use javascript:void(0); to achieve your req.

Please find below working snippet

 $('img').on('click', function(){ var currentImg = $(this).attr('src'); $('img.flavius-img-preview').attr('src', currentImg); $('.flavius-modal-bg').css('display', 'block'); }); $('.close-modal-bg').on('click', function(){ $scrollTop = $('body').scrollTop(); $('.flavius-modal-bg').css('display', 'none'); setScrollPosition($scrollTop); }); function setScrollPosition($scrollTop) { $('body').scrollTop($scrollTop); } 

 body, html { padding: 0; border: 0; margin: 0; } .flavius-modal-bg { display: none; position: fixed; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 1; } .flavius-img-section { background: rgba(255,255,255,0.8); height: 80%; width: 80%; margin: 0 auto; text-align: center; z-index: 100; } .flavius-options-section { background: white; height: 20%; width: 80%; margin: 0 auto; } .flavius-img-preview { position: relative; top: 50%; transform: translateY(-50%); min-width: 500px; width: 500px; max-height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="flavius-modal-bg"> <div class="flavius-img-section"> <img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt=""> </div> <div class="flavius-options-section"> <a class="close-modal-bg" href="javascript:void(0);">Close Me</a> <a href="#">Some button clicked</a> </div> </div> <img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt=""> <img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt=""> 

Answer 2

I update your jsfiddle here https://jsfiddle.net/w407wdrv/1/ The problem is on <a class="close-modal-bg" href="#">Close Me</a> , by replacing href="#" with href="javascript:void(0);" it will prevent the page to scroll on top.

Answer 3

The problem is just the ash that you use for the href:

<div class="flavius-options-section">
    <a class="close-modal-bg" href="#">Close Me</a>
    <a href="#">Some button clicked</a>
</div>

1.Remove the ash from the href of the closing anchor

<div class="flavius-options-section">
    <a class="close-modal-bg">Close Me</a>
    <a href="#">Some button clicked</a>
</div>

2.Add a class to style the link

.close-modal-bg{
     cursor:pointer;
     text-decoration: underline;
     color:blue;
}

 $('img').on('click', function(){ var currentImg = $(this).attr('src'); $('img.flavius-img-preview').attr('src', currentImg); $('.flavius-modal-bg').css('display', 'block'); }); $('.close-modal-bg').on('click', function(){ $scrollTop = $('body').scrollTop(); $('.flavius-modal-bg').css('display', 'none'); setScrollPosition($scrollTop); }); function setScrollPosition($scrollTop) { $('body').scrollTop($scrollTop); } 

  body, html { padding: 0; border: 0; margin: 0; } .flavius-modal-bg { display: none; position: fixed; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 1; } .flavius-img-section { background: rgba(255,255,255,0.8); height: 80%; width: 80%; margin: 0 auto; text-align: center; z-index: 100; } .flavius-options-section { background: white; height: 20%; width: 80%; margin: 0 auto; } .flavius-img-preview { position: relative; top: 50%; transform: translateY(-50%); min-width: 500px; width: 500px; max-height: 100%; } .close-modal-bg{ cursor:pointer; text-decoration: underline; color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flavius-modal-bg"> <div class="flavius-img-section"> <img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt=""> </div> <div class="flavius-options-section"> <a class="close-modal-bg">Close Me</a> <a href="#">Some button clicked</a> </div> </div> <img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt=""> <img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt=""> 

Answer 4

change your clsoe function to this,

 $('.close-modal-bg').on('click', function(e){
    e.preventDefault();
        $scrollTop = $('body').scrollTop();
        $('.flavius-modal-bg').css('display', 'none');

        setScrollPosition($scrollTop);
    });

As in w3schools.com ,

The event.preventDefault() method stops the default action of an element from happening.

For example:

1.Prevent a submit button from submitting a form
2.Prevent a link from following the URL

Hope this helps you.