jQuery修复点击后页面滚动到顶部

wr98u20j 于 2023-08-04 发布在 jQuery

关注(0)|答案(5)|浏览(170)

即时通讯只是建立一个基本的灯箱类型插件，以适应一个项目即时通讯建设的需要。它基本上只允许用户点击页面上的一个图像，图像就会出现在lightbox中，问题是当我点击lightbox上的关闭按钮时，脚本会导致窗口拍摄到页面的顶部。
这是不需要的行为，因为如果我一直在滚动1000多张图片，例如，我不希望它只是撤销所有的滚动只是关闭一张图片。

Here is my fiddle：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>

字符串

jquery

来源：https://stackoverflow.com/questions/43629330/jquery-fix-page-scrolling-to-top-after-click

5条答案

按热度按时间

eqzww0vc1#

您可以使用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="">

赞(0）回复(0）举报 2023-08-04

q8l4jmvw2#

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

赞(0）回复(0）举报 2023-08-04

lkaoscv73#

问题只是你在href中使用的ash：

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

赞(0）回复(0）举报 2023-08-04

kiayqfof4#

把clsoe函数改成这样

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

        setScrollPosition($scrollTop);
    });

字符串
在w3schools.com中，
preventDefault（）方法阻止元素的默认操作发生。
举例来说：
1.阻止提交按钮提交表单
2.阻止URL后面的链接
希望这对你有帮助。

赞(0）回复(0）举报 2023-08-04

cx6n0qe35#

可以使用preventDefault()：

$('a.my-class').on('click', function(event){
    event.preventDefault();
    // do your thing
})

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jQuery修复点击后页面滚动到顶部

5条答案

相关问题

热门标签

最新问答