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>

This was has been fixed, please upgrade your SweetAlert2 dependency to the latest version. — Limon Monte, Feb 01 '18 at 13:28

score 4 · Answer 1 · edited Apr 28 '20 at 11:45

4

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

edited Apr 28 '20 at 11:45

Azametzin

4,342
12
22
38

answered Apr 28 '20 at 11:29

Vu Tuan Hung

39
2

score 3 · Answer 2 · answered Sep 09 '17 at 21:52

3

Try this

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

answered Sep 09 '17 at 21:52

Achraf

924
5
14

Still doesn't seem to do anything. After pressing OK on the sweetalert2 it scrolls back to the top of the page. – Exoon Sep 10 '17 at 13:09
Try This body.swal2-height-auto { overflow-y: visible !important; height:100% !important; } – Khaled Feb 28 '19 at 00:10

score 3 · Answer 3 · edited Oct 03 '18 at 04:41

3

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

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

edited Oct 03 '18 at 04:41

Stephen Rauch

40,722
30
82
105

answered Oct 03 '18 at 04:24

Nhat Ngo

65
1
8

score 1 · Answer 4 · answered Jan 14 '18 at 17:19

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

score 1 · Answer 5 · answered Aug 01 '19 at 05:16

1

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

answered Aug 01 '19 at 05:16

gihandilanka

374
3
14

1

Worked. Thank you! – NiallMitch14 Jan 22 '21 at 15:25

Oscar Martinez · Answer 6 · 2021-04-07T15:45:20.063

1

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

edited Apr 07 '21 at 15:45

answered Feb 24 '20 at 21:18

Oscar Martinez

29
4

score 0 · Answer 7 · answered Apr 19 '21 at 21:47

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

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

7 Answers7