3

This is potentially a somewhat oddly specific question.

The situation:

I have a page with a position:fixed modal dialog (actually several, but that's irrelevant to the problem, as far as I've been able to determine). The modal opens when clicking a certain link. A script listens for hashchange events in order to close the modal when the user hits the back button.

The expected behaviour is that when back:ing out of the dialog, the page returns to the scroll position where it was before opening the modal. This happens in nearly every modern browser I've tested (desktop FF, Chrome, IE9/10/11 and Safari, and Chrome for Android).

On iPhone/mobile Safari, the page instead scrolls back to the top.

Test code

This is as reduced as I've been able to make it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html, charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Modal test</title>
</head>
<body>

<h1>Header</h1>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>

<h1>Header</h1>
<p><a href="##popup" class="js-open-popup">Open popup</a></p>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling<br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>


<div id="#popup" style="background:#fff; width:300px; height:100px; border:2px solid #000; position:fixed; top:50px; left:50px; display:none">
    Modal dialog.<br>
    Hitting 'back' should close this modal.<br><br>

    <a href="javascript:void(0)" class="js-close-popup">Close modal</a>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function(){
            $('.js-close-popup').click(function(ev){
                window.history.back();
                return false;
            });

            $('.js-open-popup').click(function(ev){
                $('#\\#popup').fadeIn(400);
            });
        });

        $(window).on('hashchange', function(){
            hash = window.location.hash.replace('#','');
            if(hash == '' || hash.lastIndexOf('#', 0) !== 0){
                $('#\\#popup').fadeOut(400);
            }
        });
    })(jQuery);
</script>

</body>
</html>

What I want to do is kill the scroll-to-top on iPhones, if at all possible without changing too much of the back-button logic for the popups (or breaking something in any other browsers).

I've searched SO for X number of hours but haven't been able to find a mention of this particular problem, or indeed a solution that works. Feel free to slap me on the fingers and point me in the right direction if I've missed an existing thread that answers my question.

EDIT: To clarify, opening the popup works as expected and does not cause any "auto-scroll".

Masala
  • 86
  • 1
  • 8

1 Answers1

0

This is definitely related to having "#" for "a href" value in your code. Also, I see a "##" in your code for a name of the ID, which i believe the reason for this. Try using some other name convention. When you are writing ID's, you don't need to give "#" in the HTML code. Try working on these lines, it might work for you.

Thanks!!

SSV
  • 61
  • 1
  • No, it's not. IDs starting with a # is actually fine HTML5 and CSS (see eg. https://mathiasbynens.be/notes/css-escapes). Also, **the bug persists when removing the "extraneous" # from the popup ID,** so ... – Masala Aug 11 '15 at 10:06
  • http://stackoverflow.com/questions/1631924/preventing-onclick-page-jumps http://stackoverflow.com/questions/2024342/link-with-href-scrolls-page-to-top-when-used-with-jquery-slidetoggle Above links might help you. – SSV Aug 11 '15 at 10:15
  • Thanks, but no, that was one of the first things I tried. The jump-to-top isn't occurring when clicking a link, only when going backwards in the browser history (okay, it also happens when you click the Close link in the modal, but as you can see above that only triggers a `window.history.back()` ). – Masala Aug 11 '15 at 13:17
  • Besides, the close link already doesn't have a # in the href and the page doesn't autoscroll when using the open popup link. Have you tried running my test code on mobile Safari? – Masala Aug 11 '15 at 13:25
  • @masala Did you find any solution for this? I am having the exact same issue – The Lazy Log Feb 13 '17 at 13:16
  • The only thing I found was the difference with which mobile Safari and most other browsers handle "navigating backwards to a named anchor" (here, the anchor "#") - mobile Safari will apparently _scroll to the start of that anchor_ where other browsers will go back to _wherever on the page the user was last_ (whether that's even inside the anchor or not). My takeaway: Can't be fixed unless Apple fix mobile Safari to behave like other browsers. At least I haven't been able to find any useful workarounds. – Masala Feb 14 '17 at 17:25