我正在使用jQuery Mobile（版本1.1.1和1.3.0）在移动网站上处理固定标头。单击指向锚点的链接时，会将锚点指向页面顶部（固定标题后面）。我发现的大多数修复建议在目标内容的顶部添加边距或填充，无论是一直使用还是使用伪类:target。
这不是一个可接受的解决方案，因为它会在所有时间或点击链接后向上和向下滚动内容时留下空隙。
任何其他建议将不胜感激。
HTML：
<head>
<title>Page Title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<!-- CSS Start -->
<link type="text/css" rel="stylesheet" media="all" href="/css/style.css" />
<link type="text/css" rel="stylesheet" media="all" href="/css/system-menus.css" />
<!-- CSS End -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.mobile-1.3.0.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="/jquery/jquery.mobile-1.3.0.css" />
<script type="text/javascript">
$(document).ready(function () {
$("a").attr("data-ajax", "false");
});
</script>
<meta name="description" content="Some description text." />
<meta name="keywords" content="" />
</head>
<body>
<div id="global-wrapper">
<div id="header" data-role="header" data-position="fixed">
<a href="/index.html" data-ajax="false">
<img src="myimage.png" alt="my alt text" class="logo" />
</a>
<div id="top-utility-m">
<ul>
<li><a href="http://offsite.com/somefile.pdf" data-ajax="false">Link 1</a> |</li>
<li><a href="http://offsite.com/somefile2.pdf" data-ajax="false">Link 2</a></li>
</ul>
</div>
<img src="/images/header_divider.png" alt="" /><br/>
</div><!-- end fixed header -->
<div id="wrapper">
<div id="content-wrapper" class="clear">
<div id="main-content">
<p class="scroll">Scroll Down for Menu ∨</p>
<h1>This is a header on the page</h1>
<p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
<p>Some more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
<p>Still more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
<p>Yep. Still more. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
<p>Last little bit of text.</p>
<div id="top-info">
<h3>Important Information About Blah</h3>
<p class="indent"><strong>Again, with the text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. <a href="#ContH">CONTINUED BELOW</a></strong></p>
</div>
<img src="/images/divider.png" alt="" /><br/>
<img src="/images/lg.png" alt="" /><br/>
<img src="/images/divider.png" alt="" /><br/>
<div><h2 class="centered">Some text with a suggested action.</h2></div>
<a name="menu"></a>
<div id="mainmenu-container" class="clear-block li-nav">
<ul id="thismenu" class="links">
<li><a href="/blah/index.html">Link 1</a></li>
<li><a href="/moreblah/index.html">Link 2</a></li>
<li><a href="/combined.html">Link 3</a></li>
<li><a href="/coupons/index.html">Link 4</a></li>
<li><a href="/how-to.html">Link 5</a></li>
</ul>
</div><!-- end mainmenu-container -->
<p class="disclaimer">*Here is some text that is smaller than other text</p>
<img src="/images/divider.png" alt="" /><br/>
<div id="info" class="clear">
<h3 id="ContH">This is that important info linked to from above <em>(continued)</em></h3>
<ul>
<li><strong>This is a nested list of important stuff that is hiding behind the header when the link to the named anchor is clicked.</strong>
<ul>
<li><strong>More important stuff that is hiding behind the header when the link to the named anchor is clicked.</strong></li>
<li><strong>There are lots of items in these nested lists, including:</strong>
<ul>
<li><strong>More important stuff that is hiding </strong></li>
<li><strong>behind the header when the link to the named anchor is clicked.</strong></li>
</ul>
</li>
</ul>
</li>
<li><strong>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</strong></li>
<li><strong>Some more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</strong></li>
<li><strong>Still more text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</strong></li>
<li>Yep. Still more. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</li>
</ul>
<p class="infoIndent">Last little bit of text that someone decided needed to line up with the bulleted list, but not be bulleted.</p>
</div><!-- end info -->
<div id="footer-base" class="clear">
<p>Some text with a phone number for some additional info.</p>
<div class="button full_btn"><a href="#mainmenu-container">Scroll Back to Menu</a></div>
<p class="centered whitespace"><a href="http://www.fullwebsite.com/index.html?full=true">Full Web site</a></p>
<div class="flinks">
<center><a href="http://www.help4u.com"><img src="/images/help4u.png" alt="Help 4 U" /></a></center><br />
<center><img src="/images/contact_us.png" alt="Contact Us" /></center><br />
<center><a href="http://www.domain.com"><img src="/images/logo.png" alt="Corporation Web Site" /></a></center><br />
<p class="centered">Blah text about website company<br />
Some more text about intended audience for the web site<br />
© 1900 - 2013 Company Name. All Rights Reserved.<br />
<a href="/legal.html">Legal Notices</a> |
<a href="/privacy.html">Privacy Statement</a><br/>
<a href="http://www.help4u.com">Coupons</a> |
<a href="/contactus.html">Contact Us</a>
</p>
<p> </p><p> </p>
</div><!-- end flinks -->
</div><!-- end footer-base -->
</div><!-- end main-content -->
</div><!-- end content-wrapper -->
</div><!-- end wrapper -->
</div><!--end global-wrapper -->
</body>
答案 0 :(得分：0)
以下是我解决此问题的方法：
在我试图链接的页面上方，我添加了
<div class="anchor-container"><div class="adjusted-anchor"></div></div>
在CSS
中.anchor-container {position:relative;}
.adjusted-anchor {position:absolute;z-index: 10000;}
这个jQuery（必须在窗口加载时加载标题中的任何图像）
$(window).load(function() {
var h = $("#header-content");
var headerHeight = h.outerHeight(true);
headerHeight = Math.abs(headerHeight)*-1;
$(".adjusted-isi-anchor").css( "top", headerHeight );
});
现在标题将加载，任何页面上的锚点链接都会加载到标题的底部，而不是它后面。