0

我正在使用 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 &#8744;</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 />
                    &#169; 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>&nbsp;</p><p>&nbsp;</p>
            </div><!-- end flinks -->
         </div><!-- end footer-base -->            
       </div><!-- end main-content -->
     </div><!-- end content-wrapper -->
  </div><!-- end wrapper -->
</div><!--end global-wrapper -->
</body>

4

1 回答 1

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 );
});

现在标题将加载，页面上的任何锚链接都将加载到标题的底部下方，而不是在它后面。

于 2013-06-24T18:23:33.767 回答