CODEWITHSUNDEEP
javascriptjqueryhtmlsweetalert2
Exoon
Exoon

Reputation: 1553

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

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>

Upvotes: 17

Views: 17524

Answers (9)

JustinVu
JustinVu

Reputation: 11

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.

Upvotes: 1

Silviu Iluca
Silviu Iluca

Reputation: 1

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;

}

Upvotes: -2

user15697847
user15697847

Reputation:

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

Upvotes: 1

Oscar Martinez
Oscar Martinez

Reputation: 39

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

Upvotes: 2

Vu Tuan Hung
Vu Tuan Hung

Reputation: 177

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

Upvotes: 13

gihandilanka
gihandilanka

Reputation: 615

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

Upvotes: 2

Nhat Ngo
Nhat Ngo

Reputation: 123

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

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

Upvotes: 5

user2662680
user2662680

Reputation: 706

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

Upvotes: 1

Achraf
Achraf

Reputation: 1530

Try this

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

Upvotes: 5

Related Questions