固定ヘッダーに jQuery Mobile (バージョン 1.1.1 & 1.3.0) を使用してモバイル Web サイトに取り組んでいます。名前付きアンカーへのリンクをクリックすると、アンカー ポイントがページの上部 (固定ヘッダーの後ろ) に移動します。私が見つけた修正のほとんどは、常に、または疑似クラスを使用して、宛先コンテンツの上部にマージンまたはパディングを追加することを提案しています: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>