Question

我只是构建一个基本的灯箱类型插件，以满足我建设项目的需要。它基本上只允许用户点击页面上的图像，图像出现在灯箱中，问题是当我点击灯箱上的关闭按钮时，脚本会使窗口射到页面顶部。

这是不受欢迎的行为，因为如果我一直在滚动1000多张图片，例如我不希望它只是通过关闭图片来撤消所有滚动。

这是我的小提琴： https://jsfiddle.net/w407wdrv/

这是我的代码：

<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

您可以使用javascript:void(0);来实现您的需求。

请在下面找到工作代码段

$('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

我在这里更新你的jsfiddle https://jsfiddle.net/w407wdrv/1/ 问题出在<a class="close-modal-bg" href="#">Close Me</a>，将href="#"替换为href="javascript:void(0);"会阻止页面滚动到顶部。

Answer 3

问题只是你用于href的灰：

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

1.从关闭锚的href中移除灰烬

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

2.添加一个类来设置链接样式

.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

将您的clsoe功能更改为

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

        setScrollPosition($scrollTop);
    });

与w3schools.com一样，

event.preventDefault（）方法停止发生元素的默认操作。

例如：

1.从提交表格中预防提交按钮
2.防止链接跟随URL

希望这会对你有所帮助。

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

4 个答案: