Bootstrap modal: background jumps to top on toggle

Question

I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top.

I have done everything I could to

Answer 1

I was facing the same issue. Problem was I was adding .modal-open class to html and body elements. Just add this class to body and everything work as expected.

Answer 2

I tried all of the above examples - this is the only thing that worked for me:

.modal-open {

            padding-right: 0 !important;

        }

Removing the padding from the right side of the model - prevents the jump.

Answer 3

In bootstrap 3.1.1 I solved with this solution:

body.modal-open {
    position: absolute !important;
}

Answer 4

I find it easier with this:

overflow-y: hidden;

When applied to the body class on modal opening - this prevents the vertical scroll of the body in the background and allows the user to stay in the same place without the scroll to top also.

Answer 5

I spent hours on this trying everything here and elsewhere. For angularjs-material usage, turned out I had to disable animation on the uibModal.open config object arg.

For example:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Hope this helps someone else.

Answer 6

I got the same issue and none of answers helped me. Found a workaround which looks stupid but it works at least in my case.

I found that page is scrolling to top only once and after that next opened modals works as expected. Than I found that hiding of any element in the DOM initiates the same strange scroll. So I just creating a dummy div after page load than hidding and removing it and this solved the issue.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();