jQuery Исправить прокрутку страницы вверх после клика

Я просто строю базовый плагин типа лайтбокс, чтобы удовлетворить потребности проекта, который я строю. По сути, он просто позволяет пользователю щелкнуть изображение на странице, и изображение появляется в лайтбоксе, проблема в том, что когда я нажимаю кнопку "Закрыть" в лайтбоксе, скрипт заставляет окно стрелять в верхнюю часть страницы.

Это нежелательное поведение, потому что, если я, например, прокручиваю более 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>
Источник

5 ответов

Решение

Ты можешь использовать 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="">

Источник

Я обновляю ваш jsfiddle здесь https://jsfiddle.net/w407wdrv/1/ Проблема на <a class="close-modal-bg" href="#">Close Me</a>, заменив href="#" с href="javascript:void(0);" это предотвратит прокрутку страницы сверху.

Источник

Проблема только в золе, которую вы используете для href:

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

1. Удалите пепел с края якоря

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

Источник

Измените свою функцию 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

Надеюсь, это поможет вам.

Источник

Вы можете использоватьpreventDefault():

      $('a.my-class').on('click', function(event){
    event.preventDefault();
    // do your thing
})
Источник
Другие вопросы по тегам