How can i stop sweetalert scrolling to top after clicking ok?

Question

I'm using sweetalert2 script for when a user posts a comment on my site, It scrolls down to their comment and sweet alert pops up but when they click ok on the sweet alert box it scrolls back upto the top.

From what i've been reading i need some sort of preventdefault or something but i can't figure out where that would go?

Here is my script:

<!-- Sweet alert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.js"></script>
<script>
window.location.hash = "comment-<?php echo $newcommentid; ?>";
 $(document).ready(function () {
    swal({
                title: "Comment Posted",
                text: "Thanks, your comment has now been successfully posted.",
                type: "success"
            });
 });     

</script>

Answer 1

Try this

$('#comment').click(function(event){
   //....swal stuff
   event.preventDefault();
});

Answer 2

There are times where you might need more. I was trying to use the previous answers but it wasn't working for me on Electron. I fixed this by using heightAuto and backdrop. Using an rgba value seems to simulate the default backdrop pretty well. Setting the backdrop manually was the only thing that fixed it for me.

swal({
   title: "Title here",
   text: "Text here",
   icon: "success",
   heightAuto: false,
   backdrop: "rgba(0,0,0,0.4)"
});

Answer 3

Base on version 7.* you can use this style:

html.swal2-shown,body.swal2-shown { overflow-y: hidden !important; height: auto!important;}

Answer 4

This is a common problem for those who have added a hidden overflow to their body.

Source: https://github.com/sweetalert2/sweetalert2/issues/781

The solution is simple...add this to your CSS:

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { overflow-y: visible !important; }

Answer 5

Well! I am using sweetalert2 version 11.7.2 (with React) and faced the same problem. I've been tinkering all day and realized that the problem is not with sweetalert2. because the demos on https://sweetalert2.github.io/#icons don't have the same problem.

I rummaged through my code and realized the problem was in the a tag.

specifically when i click on the a tag the sweetalert modal pops up, but i have the href="#" attribute set and that is the problem. When href="#", that a tag will automatically bring you to the top of the page.

So the fix is ​​very simple, just change the a tag to a button or span tag with the onClick event. If you don't want to lose the a tag, just don't declare the href attribute.

Hope this help because all the repair suggestions on this site didn't work for me.

Answer 6

I successfully prevented that by simply adding a line in the fire(): heightAuto: false

Swal.fire({
  heightAuto: false,
  text: "I\'m sure this would run on SWAL2@7*"
)};

Answer 7

For those having still the same issue, you can add this: "heightAuto: false" to your Sweet Alert options and the problem solves.

Swal.fire({
heightAuto: false,
title: 'Hello',
Text: 'This is an alert'
});

Answer 8

I got it to work by using, i had the issue on mobile and it put the body to position fixed and it made the html have 0 height.

body.swal2-shown, body.swal2-shown.swal2-iosfix {
position: initial !important;

}

Answer 9

Use the backdrop option and set it to false as below.

swal({
   backdrop:false,
   title: "Comment Posted",
   text: "Thanks, your comment has now been successfully posted.",
   type: "success"
});