jQuery-confirm prevent scroll on callerElement.hide()

Question

I have a problem where my page scroll to the top after i hide the button element which opened the confirm dialog.

After a confirm doalog closes it scroll back scroll to the caller element. If no such element, scroll to the top instead. Can I prevent that scroll?

I've re-created my problem in js fiddle: https://jsfiddle.net/at6sLy2g/

$('#openDialog').on('click', function(){
  $.confirm({
      buttons: {
          confirm: function () {
            $('#openDialog').hide();
          },
          cancel: function () {
          }
      }
  });
})

@ChrisG already solved your original problem but I have a question. Why `$('#openDialog').hide();` after you are already scrolling up. If that is desired (I can't think why), make sure you `.show()` the button again when user reaches to bottom of page for a better UX. — Fr0zenFyr, Mar 20 '19 at 12:38
@Fr0zenFyr The code i provided was just enough to show the problem, and does reflect my problem, and nothing more. I totally agree that this is bad ux though :P — Jonas Holm, Mar 20 '19 at 13:48

score 1 · Answer 1 · answered Aug 28 '20 at 08:11

Add below lines to confirm popup configuration:

$.confirm({
    scrollToPreviousElement: false, // add this line 
    scrollToPreviousElementAnimate: false, // add this line 
    buttons: {
        confirm: function () {
            $('#openDialog').hide();
        },
        cancel: function () {
        }
    }
});

score 0 · Answer 2 · answered Sep 08 '22 at 16:41

0

scrollToPreviousElementAnimate:false

answered Sep 08 '22 at 16:41

Edu Garayar

1

jQuery-confirm prevent scroll on callerElement.hide()

2 Answers2