JQuery Dialog Box auto scrolling to bottom

Question

I have a dialog "pop up" box that loads pictures and information, and whenever i launch the box, the page automatically scrolls all the way to the bottom and wont let me scroll back up until all the information has loaded. I have no clue why it does this. Any thoughts?

$( "#dialog-view" ).dialog({
        resizable: false,
        width:'auto',
        fluid: true,
        modal: true,
        autoOpen: false,

        buttons: 
            {
    "Done": function() 
    {
      $("#dialog-view").dialog("close");
    }
  }
});

[Have a look at this](http://stackoverflow.com/questions/756325/how-can-i-make-a-jquery-ui-dialog-automatically-grow-or-shrink-to-fit-its-conten#756449) and see if anything helps...? — cssyphus, Sep 26 '13 at 21:01
have you looked at preventDefault? I think this may prevent the screen scrolling. — m33bo, Sep 26 '13 at 21:01

score 10 · Answer 1 · edited May 23 '17 at 12:17

10

I had a similar issue, that was driving me crazy! I was looking for an anchor with a #, and also searching for a javascript action forcing it to scroll to the window bottom.

It turns out that the AJAX code that I was loading had an anchor at the bottom (a link to my website). The web browser rendered the code such that it went to the only anchor on the page.

To eliminate this, I added a negative tabindex to the anchor:

<a href="http://www.keppiehed.com" tabindex="-1">Keppiehed.com</a>

According to the first answer at How to ignore HTML element from tabindex?, The W3C HTML5 specification supports negative tabindex values.

I know this post is a little old, but I hope it helps you and others with this hard to diagnose problem!

edited May 23 '17 at 12:17

Community

1
1

answered Jul 07 '14 at 21:35

Sablefoste

4,032
3
37
58

1

@FahadIshaque, I'm glad it worked out for you! That is why i turn to StackOverflow so much, and add answers to even old questions when I have spend a bit of time researching them. – Sablefoste Feb 15 '16 at 14:49
1

After seeing this answer a lightbulb clicked in my head and found out I also had a link in my loaded content that was causing the scroll to the bottom. Thank you for the insight! Setting the tabindex solved it for me. – cellen Mar 23 '17 at 19:20

score 0 · Answer 2 · answered Mar 21 '16 at 09:55

Your dialog might be positioning wrong, use Position for API or the solution that worked for me to set the distance from top like this:

$("#dialog").dialog({ position: [($(window).width() / 2) - (dialogWidth / 2), 150] });
$("#dialog").dialog("open");

score 0 · Answer 3 · answered Aug 25 '20 at 19:10

0

In case you don't feel like adding tabindex attributes to all the a tags, based on @Sablefoste answer above

$('#my-dialog-id').find('a').attr('tabindex',-1);

answered Aug 25 '20 at 19:10

111

1,788
1
23
38

JQuery Dialog Box auto scrolling to bottom

3 Answers3