Page scrolls to top when modal is closed

Question

I have implemented a modal, but I don't want the page to scroll to the top when the modal is closed. It does this automatically. Is there a code governing the code below that I am missing? Thanks for any help!

HTML

<a href="#target-content" id="button">Open A Modal</a>

<div id="target-content">
  <a href="#" class="close"></a>
  <div id="target-inner">
    <h2>Modal Heading</h2>
    <p>Modal Content</p>
  </div>
</div>

CSS

#target-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

#target-content:target {
  pointer-events: all;
  opacity: 1;
}

#target-content #target-inner {
  position: absolute;
  display: block;
  padding: 48px;
  line-height: 1.8;
  width: 70%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
  color: #34495E;
}

#target-content #target-inner h2 { margin-top: 0; }

#target-content #target-inner code { font-weight: bold; }

#target-content a.close {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #34495E;
  opacity: 0.5;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

#target-content a.close:hover { opacity: 0.4; }

what framework are you using? It's possibly the javascript function modal-dialog.close() that has window.scrollTo(0,0) inside — Luca, Sep 25 '15 at 17:59
@greatwanderer - when you have determine the best solution to your answer, please make sure to select the preferred answer by selecting the "checkmark" next to the correct answer. This will close the question and mark it as answered. — rockmandew, Sep 25 '15 at 18:33

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

1

The # in the href attribute will send your page to the top.

<a href="#" class="close"></a> <!-- moves scroll position to top of page -->

One solution is to replace the # with a particular ID where you would want the page to go or stay.

Try this:

<a href="#target-content" class="close"></a>

Read more about hyperlinks and hashtags here: What is href="#" and why is it used?

edited May 23 '17 at 10:27

Community

1
1

answered Sep 25 '15 at 17:58

Michael Benjamin

346,931
104
581
701

1

Phenomenal! Thank you so much for the information on hyperlinks. All I did was changed "#" to "#!" and the page no longer scrolls to the top when the modal is closed. Thank you again! – greatwanderer Sep 25 '15 at 18:24
@greatwanderer - I wouldn't set it to a non-existent element, that's not good practice. Try using my suggestion, you'll get the same result, while following better standards. – rockmandew Sep 25 '15 at 18:26
@Michael_B - I upvoted for you concise and correct answer, as well as providing supporting documentation. Don't take my previous comment negatively, he was just using your solution incorrectly. – rockmandew Sep 25 '15 at 18:27
1

@rockmandew, I don't think there's any harm in using `#!`. Although your option among the two is good, too (I would say preferable to `#!`, but both are safe to use). Read the post I referenced in my answer for more details. – Michael Benjamin Sep 25 '15 at 18:29
@Michael_B - You're 100% correct, I don't believe there is _harm_ in using it that way, I just don't think it is best practice. Thanks for the feedback, keep up the good work and thanks for helping others out. – rockmandew Sep 25 '15 at 18:31

score 1 · Answer 2 · answered Sep 25 '15 at 18:24

As Michael_B stated, the "#" in your href tag will send the page to the top. As an alternative to setting your href to an id (i.e. "href='#target'") - you could use something like this, that would prevent anything from happening:

href="javascript:void(0);"

This will solve your problem.

Page scrolls to top when modal is closed

2 Answers2