CODEWITHSUNDEEP
javascriptscrollpopup
Hy K
Hy K

Reputation: 177

I tried to animate scroll with the popup open but it does not work

Hello I have a question

After popup

I had to use animate to scroll to the position I wanted.

But that code did not work.

I do not know why.

It is the code that works if it is not in the popup state.

code

$('.category_name_list_button').click(function (e) {
    const user_name = $("#shortcut_user_id").val();
    const url = '/wm/myshorcut/nicklist/' + user_name
    const ch = $("#current_category").text()

    $.get(url)
        .done((result) => {
            console.log("result : ", result);
            $(".category_nick_area").html(result)

            $("#CategoryModal").modal();

            $("#" + ch).css("background-color", "skyblue");

            // alert("ch : " +ch)
            //
            // $('html, body').animate({
            //     'scrollTop' : $("#"+ch).offset().top
            // });

        })
        .fail(() => {
            console.log("fail");
        })
        .always(() => {
            console.log('always');
        })
})

and

I've changed the class name from body to modal window class name, but it's still not.

            // work 
            $("#" + ch).css("background-color", "skyblue");

            // not work
            $('html, .categoynick_modal').animate({
                'scrollTop': $("#"+ch).offset().top
            });

modal

<div class="modal fade categoynick_modal" id="CategoryModal" role="dialog">
    <div class="modal-dialog modal-xl">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Header</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body category_nick_area">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Thank you very much for letting me know how to run animate scroll with popups open or how to move to a specific location.

enter image description here

Upvotes: 0

Views: 262

Answers (2)

Fran&#231;ois Hupp&#233;
Fran&#231;ois Hupp&#233;

Reputation: 2116

Unless you absolutely need to use jQuery animate function, maybe you could try this:

document.getElementById('CategoryModal').scrollTo({
  top: $("#"+ch).offset().top,
  left: 0,
  behavior: 'smooth'
});

Upvotes: 1

Thameem
Thameem

Reputation: 756

I think you should use the scroll to like this

$('html, YOUR_MODAL_DIV_ID_OR_CLASS').animate({
   'scrollTop' : $("#"+ch).offset().top
});

Don't use body !

Upvotes: 1

Related Questions