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>

Philipines

This was has been fixed, please upgrade your SweetAlert2 dependency to the latest version. – Drill

Answer 1

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*"
)};

Ballinger

Thank you! Saved me from this irritating frustration. :) – Banner

Answer 2

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

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

Gardal

Answer 3

Try this

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

Britska

Still doesn't seem to do anything. After pressing OK on the sweetalert2 it scrolls back to the top of the page. – Philipines

Try This body.swal2-height-auto { overflow-y: visible !important; height:100% !important; } – Beluga

Answer 4

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"
});

Trichology

Setting backdrop to false makes it seem to work, but also removed the background. – Attaboy

Not useful since it allows to interact with background elemets. – Underside

Answer 5

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'
});

Epileptoid

Answer 6

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; }

Eisinger

Answer 7

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)"
});

Atworth

Answer 8

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.

Reeder

Answer 9

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;

}

Berti