在移动Safari中使用“后退”按钮关闭模式时，页面滚动到顶部
[英]Page scrolls to top when closing modal using back button in mobile Safari
问题描述
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). 我有一个带有position:fixed模态对话框的页面（实际上是几个对话框，但就我所能确定的而言，与该问题无关）。 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. 脚本侦听hashchange事件，以便在用户单击“后退”按钮时关闭模式。
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). 在我测试过的几乎所有现代浏览器（台式FF，Chrome，IE9 / 10/11和Safari和Android版Chrome）中都会发生这种情况。
On iPhone/mobile Safari, the page instead scrolls back to the top. 在iPhone /移动Safari上，页面将滚动回到顶部。
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). 我想做的是在不改变弹出窗口的太多后退按钮逻辑（或在其他任何浏览器中破坏某些东西）的情况下，尽可能取消iPhone上的滚动到顶部。
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. 我在SO中搜索了X个小时，但没有找到关于此特定问题或确实有效的解决方案的提及。 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". 编辑：澄清一下，打开弹出窗口按预期方式工作，不会引起任何“自动滚动”。
1 个解决方案
解决方案1
0 2015-08-11 08:42:32
This is definitely related to having "#" for "a href" value in your code. 这绝对与代码中的“ a href”值具有“＃”有关。 Also, I see a "##" in your code for a name of the ID, which i believe the reason for this. 另外，我在您的代码中看到ID名称的“ ##”，这是我相信的原因。 Try using some other name convention. 尝试使用其他一些名称约定。 When you are writing ID's, you don't need to give "#" in the HTML code. 编写ID时，无需在HTML代码中输入“＃”。 Try working on these lines, it might work for you. 尝试在这些线路上工作，它可能对您有用。
Thanks!! 谢谢！！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.