Question

我有一个包含不同div的长页面，每个div包含很多内容。当您登陆页面时，此内容将被隐藏，然后在您到达每个部分的标题后展开，方法是单击指向锚点的链接或滚动。我使用jQuery Waypoints来做到这一点。

这一切都在这个页面上工作正常。我的问题是，如果从另一个页面链接到其中一个锚点，一些Waypoints会在滚动时触发，增加页面的高度，所以你最终会在错误的位置。

这似乎只发生在Firefox 中 - Chrome和IE在正确的位置登陆，只有正确的Waypoint被解雇。

我在http://jennoefur.co.uk/test/page1.html有一个例子。如果你去了第2页。在导航中然后转到第6节＆＃39;你应该看到问题。

道歉，如果这在某种程度上证明是重复的，我一直在搜索和搜索，无法找到答案或解决方案。非常感谢您提供任何帮助，这是我提出的第一个问题，因此任何关于我可能出错的指导也将不胜感激！

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="jquery.waypoints.min.js" type="text/javascript"></script>
<script src="myWaypoints.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $('nav').stickThis();

    });

</script>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<nav id="mainNav">
    <ul>
        <li>
            <a href="#section2">Section 2</a>
        </li>


        <li>
            <a href="#section3">Section 3</a>
        </li>


        <li>
            <a href="#section4">Section 4</a>
        </li>


        <li>
            <a href="#section5">Section 5</a>
        </li>


        <li>
            <a href="#section6">Section 6</a>
        </li>


        <li>
            <a href="page2.html">Page 2</a>
        </li>
    </ul>
</nav>


<div id="section1">

    <div class="sectionHeading">
        <h1>This is the introduction section</h1>
    </div>

    <div class="wrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam sagittis erat eu tempor. Integer eget dictum felis, nec auctor sem. Ut eu tellus elementum magna rhoncus tristique. Vivamus suscipit lacinia dolor eget dapibus. Suspendisse vestibulum orci hendrerit lectus faucibus, quis faucibus purus aliquam. Donec non ligula eget ante cursus consequat. In ultrices, turpis eget tincidunt facilisis, risus orci sollicitudin odio, a auctor turpis mauris ac nunc.</p>
        <p>Quisque quis lectus vestibulum eros suscipit sollicitudin id auctor nulla. Praesent est lacus, bibendum at vulputate sed, elementum a felis. Donec neque magna, maximus a tempor condimentum, eleifend rutrum odio. Curabitur tincidunt mi eros, quis porttitor nunc porttitor at. Nam eu sapien vel justo commodo interdum at et dolor. Vestibulum eleifend ex justo, non pharetra purus rutrum non. Nam elementum mauris eu dignissim accumsan. Ut eget purus libero. Nunc eget nibh tincidunt, vulputate nisl vel, mollis elit. Aenean laoreet leo eu tincidunt semper. Vivamus sit amet quam malesuada, blandit risus eu, auctor risus. Aliquam porta porttitor facilisis. Maecenas egestas augue justo, eu consequat justo molestie quis. Praesent enim purus, venenatis ac purus vitae, rutrum sagittis augue. Cras imperdiet massa eu condimentum vulputate.</p>
        <p>Fusce venenatis libero a odio ullamcorper elementum. Praesent fermentum ipsum sed felis tincidunt vehicula. Quisque pretium nisl ut massa ultricies, vel dignissim nibh condimentum. Cras ullamcorper neque vel velit scelerisque, et eleifend dolor commodo. Quisque ultricies commodo urna, in viverra ipsum hendrerit aliquet. Vestibulum lacinia gravida odio. Maecenas suscipit tempus risus, condimentum ultricies nunc suscipit quis. Nulla sit amet egestas leo. Aenean eget sapien eu quam elementum pretium dignissim in erat.</p>
        <p>Aliquam vehicula vel ante in commodo. Phasellus semper purus at semper cursus. Duis euismod, sem a vehicula volutpat, nisi nisi pretium turpis, sit amet laoreet orci lacus eget sem. Sed mi dolor, tristique lacinia viverra at, congue ac ex. Duis tincidunt bibendum fringilla. Vestibulum condimentum semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis velit purus, aliquet at dignissim in, vestibulum quis sem. Maecenas pharetra maximus risus, nec rhoncus elit bibendum quis. Quisque eleifend scelerisque eros, quis rhoncus ipsum auctor vitae. Nullam magna felis, ornare non leo eu, sodales gravida est. In placerat mauris suscipit tortor accumsan, eu blandit quam sagittis. Phasellus vitae eros eu nisi blandit faucibus. Donec turpis leo, dictum at lacus vel, malesuada luctus libero.</p>
        <p>
        tiam semper justo vitae sapien dapibus efficitur id ut nibh. Sed ut risus odio. Curabitur cursus, nisl ac sollicitudin faucibus, sem enim bibendum tellus, quis lobortis justo arcu non tellus. Vestibulum luctus mi sed est ornare, ac lacinia arcu iaculis. Praesent sed dolor neque. Donec maximus non sem et pulvinar. Quisque ac est eros.</p>
    </div>

</div>

<div id="section2">

    <div class="sectionHeading">
        <h1>Section 2</h1>
    </div>

    <div class="wrap openDiv">
        <h2>Subheading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam sagittis erat eu tempor. Integer eget dictum felis, nec auctor sem. Ut eu tellus elementum magna rhoncus tristique. Vivamus suscipit lacinia dolor eget dapibus. Suspendisse vestibulum orci hendrerit lectus faucibus, quis faucibus purus aliquam. Donec non ligula eget ante cursus consequat. In ultrices, turpis eget tincidunt facilisis, risus orci sollicitudin odio, a auctor turpis mauris ac nunc.</p>
        <h2>Subheading</h2>
        <p>Quisque quis lectus vestibulum eros suscipit sollicitudin id auctor nulla. Praesent est lacus, bibendum at vulputate sed, elementum a felis. Donec neque magna, maximus a tempor condimentum, eleifend rutrum odio. Curabitur tincidunt mi eros, quis porttitor nunc porttitor at. Nam eu sapien vel justo commodo interdum at et dolor. Vestibulum eleifend ex justo, non pharetra purus rutrum non. Nam elementum mauris eu dignissim accumsan. Ut eget purus libero. Nunc eget nibh tincidunt, vulputate nisl vel, mollis elit. Aenean laoreet leo eu tincidunt semper. Vivamus sit amet quam malesuada, blandit risus eu, auctor risus. Aliquam porta porttitor facilisis. Maecenas egestas augue justo, eu consequat justo molestie quis. Praesent enim purus, venenatis ac purus vitae, rutrum sagittis augue. Cras imperdiet massa eu condimentum vulputate.</p>
        <h2>Subheading</h2>
        <p>Fusce venenatis libero a odio ullamcorper elementum. Praesent fermentum ipsum sed felis tincidunt vehicula. Quisque pretium nisl ut massa ultricies, vel dignissim nibh condimentum. Cras ullamcorper neque vel velit scelerisque, et eleifend dolor commodo. Quisque ultricies commodo urna, in viverra ipsum hendrerit aliquet. Vestibulum lacinia gravida odio. Maecenas suscipit tempus risus, condimentum ultricies nunc suscipit quis. Nulla sit amet egestas leo. Aenean eget sapien eu quam elementum pretium dignissim in erat.</p>
        <p>Aliquam vehicula vel ante in commodo. Phasellus semper purus at semper cursus. Duis euismod, sem a vehicula volutpat, nisi nisi pretium turpis, sit amet laoreet orci lacus eget sem. Sed mi dolor, tristique lacinia viverra at, congue ac ex. Duis tincidunt bibendum fringilla. Vestibulum condimentum semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis velit purus, aliquet at dignissim in, vestibulum quis sem. Maecenas pharetra maximus risus, nec rhoncus elit bibendum quis. Quisque eleifend scelerisque eros, quis rhoncus ipsum auctor vitae. Nullam magna felis, ornare non leo eu, sodales gravida est. In placerat mauris suscipit tortor accumsan, eu blandit quam sagittis. Phasellus vitae eros eu nisi blandit faucibus. Donec turpis leo, dictum at lacus vel, malesuada luctus libero.</p>
        <h2>Subheading</h2>
        <p>tiam semper justo vitae sapien dapibus efficitur id ut nibh. Sed ut risus odio. Curabitur cursus, nisl ac sollicitudin faucibus, sem enim bibendum tellus, quis lobortis justo arcu non tellus. Vestibulum luctus mi sed est ornare, ac lacinia arcu iaculis. Praesent sed dolor neque. Donec maximus non sem et pulvinar. Quisque ac est eros.</p>
    </div>

</div>

<div id="section3">

    <div class="sectionHeading">
        <h1>Section 3</h1>
    </div>

    <div class="wrap openDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam sagittis erat eu tempor. Integer eget dictum felis, nec auctor sem. Ut eu tellus elementum magna rhoncus tristique. Vivamus suscipit lacinia dolor eget dapibus. Suspendisse vestibulum orci hendrerit lectus faucibus, quis faucibus purus aliquam. Donec non ligula eget ante cursus consequat. In ultrices, turpis eget tincidunt facilisis, risus orci sollicitudin odio, a auctor turpis mauris ac nunc.</p>
        <p>Quisque quis lectus vestibulum eros suscipit sollicitudin id auctor nulla. Praesent est lacus, bibendum at vulputate sed, elementum a felis. Donec neque magna, maximus a tempor condimentum, eleifend rutrum odio. Curabitur tincidunt mi eros, quis porttitor nunc porttitor at. Nam eu sapien vel justo commodo interdum at et dolor. Vestibulum eleifend ex justo, non pharetra purus rutrum non. Nam elementum mauris eu dignissim accumsan. Ut eget purus libero. Nunc eget nibh tincidunt, vulputate nisl vel, mollis elit. Aenean laoreet leo eu tincidunt semper. Vivamus sit amet quam malesuada, blandit risus eu, auctor risus. Aliquam porta porttitor facilisis. Maecenas egestas augue justo, eu consequat justo molestie quis. Praesent enim purus, venenatis ac purus vitae, rutrum sagittis augue. Cras imperdiet massa eu condimentum vulputate.</p>
        <p>Fusce venenatis libero a odio ullamcorper elementum. Praesent fermentum ipsum sed felis tincidunt vehicula. Quisque pretium nisl ut massa ultricies, vel dignissim nibh condimentum. Cras ullamcorper neque vel velit scelerisque, et eleifend dolor commodo. Quisque ultricies commodo urna, in viverra ipsum hendrerit aliquet. Vestibulum lacinia gravida odio. Maecenas suscipit tempus risus, condimentum ultricies nunc suscipit quis. Nulla sit amet egestas leo. Aenean eget sapien eu quam elementum pretium dignissim in erat.</p>
        <p>Aliquam vehicula vel ante in commodo. Phasellus semper purus at semper cursus. Duis euismod, sem a vehicula volutpat, nisi nisi pretium turpis, sit amet laoreet orci lacus eget sem. Sed mi dolor, tristique lacinia viverra at, congue ac ex. Duis tincidunt bibendum fringilla. Vestibulum condimentum semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis velit purus, aliquet at dignissim in, vestibulum quis sem. Maecenas pharetra maximus risus, nec rhoncus elit bibendum quis. Quisque eleifend scelerisque eros, quis rhoncus ipsum auctor vitae. Nullam magna felis, ornare non leo eu, sodales gravida est. In placerat mauris suscipit tortor accumsan, eu blandit quam sagittis. Phasellus vitae eros eu nisi blandit faucibus. Donec turpis leo, dictum at lacus vel, malesuada luctus libero.</p>
        <p>
        tiam semper justo vitae sapien dapibus efficitur id ut nibh. Sed ut risus odio. Curabitur cursus, nisl ac sollicitudin faucibus, sem enim bibendum tellus, quis lobortis justo arcu non tellus. Vestibulum luctus mi sed est ornare, ac lacinia arcu iaculis. Praesent sed dolor neque. Donec maximus non sem et pulvinar. Quisque ac est eros.</p>
    </div>

</div>

<div id="section4">

    <div class="sectionHeading">
        <h1>Section 4</h1>
    </div>

    <div class="wrap openDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam sagittis erat eu tempor. Integer eget dictum felis, nec auctor sem. Ut eu tellus elementum magna rhoncus tristique. Vivamus suscipit lacinia dolor eget dapibus. Suspendisse vestibulum orci hendrerit lectus faucibus, quis faucibus purus aliquam. Donec non ligula eget ante cursus consequat. In ultrices, turpis eget tincidunt facilisis, risus orci sollicitudin odio, a auctor turpis mauris ac nunc.</p>
        <p>Quisque quis lectus vestibulum eros suscipit sollicitudin id auctor nulla. Praesent est lacus, bibendum at vulputate sed, elementum a felis. Donec neque magna, maximus a tempor condimentum, eleifend rutrum odio. Curabitur tincidunt mi eros, quis porttitor nunc porttitor at. Nam eu sapien vel justo commodo interdum at et dolor. Vestibulum eleifend ex justo, non pharetra purus rutrum non. Nam elementum mauris eu dignissim accumsan. Ut eget purus libero. Nunc eget nibh tincidunt, vulputate nisl vel, mollis elit. Aenean laoreet leo eu tincidunt semper. Vivamus sit amet quam malesuada, blandit risus eu, auctor risus. Aliquam porta porttitor facilisis. Maecenas egestas augue justo, eu consequat justo molestie quis. Praesent enim purus, venenatis ac purus vitae, rutrum sagittis augue. Cras imperdiet massa eu condimentum vulputate.</p>
        <p>Fusce venenatis libero a odio ullamcorper elementum. Praesent fermentum ipsum sed felis tincidunt vehicula. Quisque pretium nisl ut massa ultricies, vel dignissim nibh condimentum. Cras ullamcorper neque vel velit scelerisque, et eleifend dolor commodo. Quisque ultricies commodo urna, in viverra ipsum hendrerit aliquet. Vestibulum lacinia gravida odio. Maecenas suscipit tempus risus, condimentum ultricies nunc suscipit quis. Nulla sit amet egestas leo. Aenean eget sapien eu quam elementum pretium dignissim in erat.</p>
        <p>Aliquam vehicula vel ante in commodo. Phasellus semper purus at semper cursus. Duis euismod, sem a vehicula volutpat, nisi nisi pretium turpis, sit amet laoreet orci lacus eget sem. Sed mi dolor, tristique lacinia viverra at, congue ac ex. Duis tincidunt bibendum fringilla. Vestibulum condimentum semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis velit purus, aliquet at dignissim in, vestibulum quis sem. Maecenas pharetra maximus risus, nec rhoncus elit bibendum quis. Quisque eleifend scelerisque eros, quis rhoncus ipsum auctor vitae. Nullam magna felis, ornare non leo eu, sodales gravida est. In placerat mauris suscipit tortor accumsan, eu blandit quam sagittis. Phasellus vitae eros eu nisi blandit faucibus. Donec turpis leo, dictum at lacus vel, malesuada luctus libero.</p>
        <p>
        tiam semper justo vitae sapien dapibus efficitur id ut nibh. Sed ut risus odio. Curabitur cursus, nisl ac sollicitudin faucibus, sem enim bibendum tellus, quis lobortis justo arcu non tellus. Vestibulum luctus mi sed est ornare, ac lacinia arcu iaculis. Praesent sed dolor neque. Donec maximus non sem et pulvinar. Quisque ac est eros.</p>
    </div>

</div>

<div id="section5">

    <div class="sectionHeading">
        <h1>TSection 5</h1>
    </div>

    <div class="wrap openDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam sagittis erat eu tempor. Integer eget dictum felis, nec auctor sem. Ut eu tellus elementum magna rhoncus tristique. Vivamus suscipit lacinia dolor eget dapibus. Suspendisse vestibulum orci hendrerit lectus faucibus, quis faucibus purus aliquam. Donec non ligula eget ante cursus consequat. In ultrices, turpis eget tincidunt facilisis, risus orci sollicitudin odio, a auctor turpis mauris ac nunc.</p>
        <p>Quisque quis lectus vestibulum eros suscipit sollicitudin id auctor nulla. Praesent est lacus, bibendum at vulputate sed, elementum a felis. Donec neque magna, maximus a tempor condimentum, eleifend rutrum odio. Curabitur tincidunt mi eros, quis porttitor nunc porttitor at. Nam eu sapien vel justo commodo interdum at et dolor. Vestibulum eleifend ex justo, non pharetra purus rutrum non. Nam elementum mauris eu dignissim accumsan. Ut eget purus libero. Nunc eget nibh tincidunt, vulputate nisl vel, mollis elit. Aenean laoreet leo eu tincidunt semper. Vivamus sit amet quam malesuada, blandit risus eu, auctor risus. Aliquam porta porttitor facilisis. Maecenas egestas augue justo, eu consequat justo molestie quis. Praesent enim purus, venenatis ac purus vitae, rutrum sagittis augue. Cras imperdiet massa eu condimentum vulputate.</p>
        <p>Fusce venenatis libero a odio ullamcorper elementum. Praesent fermentum ipsum sed felis tincidunt vehicula. Quisque pretium nisl ut massa ultricies, vel dignissim nibh condimentum. Cras ullamcorper neque vel velit scelerisque, et eleifend dolor commodo. Quisque ultricies commodo urna, in viverra ipsum hendrerit aliquet. Vestibulum lacinia gravida odio. Maecenas suscipit tempus risus, condimentum ultricies nunc suscipit quis. Nulla sit amet egestas leo. Aenean eget sapien eu quam elementum pretium dignissim in erat.</p>
        <p>Aliquam vehicula vel ante in commodo. Phasellus semper purus at semper cursus. Duis euismod, sem a vehicula volutpat, nisi nisi pretium turpis, sit amet laoreet orci lacus eget sem. Sed mi dolor, tristique lacinia viverra at, congue ac ex. Duis tincidunt bibendum fringilla. Vestibulum condimentum semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis velit purus, aliquet at dignissim in, vestibulum quis sem. Maecenas pharetra maximus risus, nec rhoncus elit bibendum quis. Quisque eleifend scelerisque eros, quis rhoncus ipsum auctor vitae. Nullam magna felis, ornare non leo eu, sodales gravida est. In placerat mauris suscipit tortor accumsan, eu blandit quam sagittis. Phasellus vitae eros eu nisi blandit faucibus. Donec turpis leo, dictum at lacus vel, malesuada luctus libero.</p>
        <p>
        tiam semper justo vitae sapien dapibus efficitur id ut nibh. Sed ut risus odio. Curabitur cursus, nisl ac sollicitudin faucibus, sem enim bibendum tellus, quis lobortis justo arcu non tellus. Vestibulum luctus mi sed est ornare, ac lacinia arcu iaculis. Praesent sed dolor neque. Donec maximus non sem et pulvinar. Quisque ac est eros.</p>
    </div>

</div>

<div id="section6">

    <div class="sectionHeading">
        <h1>Section 6</h1>
    </div>

    <div class="wrap openDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam sagittis erat eu tempor. Integer eget dictum felis, nec auctor sem. Ut eu tellus elementum magna rhoncus tristique. Vivamus suscipit lacinia dolor eget dapibus. Suspendisse vestibulum orci hendrerit lectus faucibus, quis faucibus purus aliquam. Donec non ligula eget ante cursus consequat. In ultrices, turpis eget tincidunt facilisis, risus orci sollicitudin odio, a auctor turpis mauris ac nunc.</p>
        <p>Quisque quis lectus vestibulum eros suscipit sollicitudin id auctor nulla. Praesent est lacus, bibendum at vulputate sed, elementum a felis. Donec neque magna, maximus a tempor condimentum, eleifend rutrum odio. Curabitur tincidunt mi eros, quis porttitor nunc porttitor at. Nam eu sapien vel justo commodo interdum at et dolor. Vestibulum eleifend ex justo, non pharetra purus rutrum non. Nam elementum mauris eu dignissim accumsan. Ut eget purus libero. Nunc eget nibh tincidunt, vulputate nisl vel, mollis elit. Aenean laoreet leo eu tincidunt semper. Vivamus sit amet quam malesuada, blandit risus eu, auctor risus. Aliquam porta porttitor facilisis. Maecenas egestas augue justo, eu consequat justo molestie quis. Praesent enim purus, venenatis ac purus vitae, rutrum sagittis augue. Cras imperdiet massa eu condimentum vulputate.</p>
        <p>Fusce venenatis libero a odio ullamcorper elementum. Praesent fermentum ipsum sed felis tincidunt vehicula. Quisque pretium nisl ut massa ultricies, vel dignissim nibh condimentum. Cras ullamcorper neque vel velit scelerisque, et eleifend dolor commodo. Quisque ultricies commodo urna, in viverra ipsum hendrerit aliquet. Vestibulum lacinia gravida odio. Maecenas suscipit tempus risus, condimentum ultricies nunc suscipit quis. Nulla sit amet egestas leo. Aenean eget sapien eu quam elementum pretium dignissim in erat.</p>
        <p>Aliquam vehicula vel ante in commodo. Phasellus semper purus at semper cursus. Duis euismod, sem a vehicula volutpat, nisi nisi pretium turpis, sit amet laoreet orci lacus eget sem. Sed mi dolor, tristique lacinia viverra at, congue ac ex. Duis tincidunt bibendum fringilla. Vestibulum condimentum semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis velit purus, aliquet at dignissim in, vestibulum quis sem. Maecenas pharetra maximus risus, nec rhoncus elit bibendum quis. Quisque eleifend scelerisque eros, quis rhoncus ipsum auctor vitae. Nullam magna felis, ornare non leo eu, sodales gravida est. In placerat mauris suscipit tortor accumsan, eu blandit quam sagittis. Phasellus vitae eros eu nisi blandit faucibus. Donec turpis leo, dictum at lacus vel, malesuada luctus libero.</p>
        <p>
        tiam semper justo vitae sapien dapibus efficitur id ut nibh. Sed ut risus odio. Curabitur cursus, nisl ac sollicitudin faucibus, sem enim bibendum tellus, quis lobortis justo arcu non tellus. Vestibulum luctus mi sed est ornare, ac lacinia arcu iaculis. Praesent sed dolor neque. Donec maximus non sem et pulvinar. Quisque ac est eros.</p>
    </div>

</div>

<div id="section7">

    <div class="sectionHeading">
        <h1>This is the closing section</h1>
    </div>

    <div class="wrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam sagittis erat eu tempor. Integer eget dictum felis, nec auctor sem. Ut eu tellus elementum magna rhoncus tristique. Vivamus suscipit lacinia dolor eget dapibus. Suspendisse vestibulum orci hendrerit lectus faucibus, quis faucibus purus aliquam. Donec non ligula eget ante cursus consequat. In ultrices, turpis eget tincidunt facilisis, risus orci sollicitudin odio, a auctor turpis mauris ac nunc.</p>
        <p>Quisque quis lectus vestibulum eros suscipit sollicitudin id auctor nulla. Praesent est lacus, bibendum at vulputate sed, elementum a felis. Donec neque magna, maximus a tempor condimentum, eleifend rutrum odio. Curabitur tincidunt mi eros, quis porttitor nunc porttitor at. Nam eu sapien vel justo commodo interdum at et dolor. Vestibulum eleifend ex justo, non pharetra purus rutrum non. Nam elementum mauris eu dignissim accumsan. Ut eget purus libero. Nunc eget nibh tincidunt, vulputate nisl vel, mollis elit. Aenean laoreet leo eu tincidunt semper. Vivamus sit amet quam malesuada, blandit risus eu, auctor risus. Aliquam porta porttitor facilisis. Maecenas egestas augue justo, eu consequat justo molestie quis. Praesent enim purus, venenatis ac purus vitae, rutrum sagittis augue. Cras imperdiet massa eu condimentum vulputate.</p>
        <p>Fusce venenatis libero a odio ullamcorper elementum. Praesent fermentum ipsum sed felis tincidunt vehicula. Quisque pretium nisl ut massa ultricies, vel dignissim nibh condimentum. Cras ullamcorper neque vel velit scelerisque, et eleifend dolor commodo. Quisque ultricies commodo urna, in viverra ipsum hendrerit aliquet. Vestibulum lacinia gravida odio. Maecenas suscipit tempus risus, condimentum ultricies nunc suscipit quis. Nulla sit amet egestas leo. Aenean eget sapien eu quam elementum pretium dignissim in erat.</p>
        <p>Aliquam vehicula vel ante in commodo. Phasellus semper purus at semper cursus. Duis euismod, sem a vehicula volutpat, nisi nisi pretium turpis, sit amet laoreet orci lacus eget sem. Sed mi dolor, tristique lacinia viverra at, congue ac ex. Duis tincidunt bibendum fringilla. Vestibulum condimentum semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut hendrerit sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis velit purus, aliquet at dignissim in, vestibulum quis sem. Maecenas pharetra maximus risus, nec rhoncus elit bibendum quis. Quisque eleifend scelerisque eros, quis rhoncus ipsum auctor vitae. Nullam magna felis, ornare non leo eu, sodales gravida est. In placerat mauris suscipit tortor accumsan, eu blandit quam sagittis. Phasellus vitae eros eu nisi blandit faucibus. Donec turpis leo, dictum at lacus vel, malesuada luctus libero.</p>
        <p>
        tiam semper justo vitae sapien dapibus efficitur id ut nibh. Sed ut risus odio. Curabitur cursus, nisl ac sollicitudin faucibus, sem enim bibendum tellus, quis lobortis justo arcu non tellus. Vestibulum luctus mi sed est ornare, ac lacinia arcu iaculis. Praesent sed dolor neque. Donec maximus non sem et pulvinar. Quisque ac est eros.</p>
    </div>

    <div class="sectionHeading">
        <h1>Footer area</h1>
    </div>

</div>

</body>
</html>

CSS：

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

nav {
    background: #666;
    border-bottom:1px solid #fff;
    padding: 1em;
}

nav ul {
    width: 987px;
    margin:auto;
    list-style: none;
}

nav ul li {
    float: left;
    margin-right: 2em;
}

nav ul li a{
    color: #fff;
    }

.sectionHeading {
    background: #666;
    width: 100%;
    padding: 5em 0;
    margin: 5em 0;
}

h1 {
    color: #fff;
    font-size: 400%;
    width: 987px;
    margin:auto;
}

.wrap {
    width: 987px;
    margin: auto;
}

.openDiv {
    display: none;
}

JS（for Waypoints）：

$(document).ready(function() {


    $('#section2').waypoint(function(direction) {
        $('#section2 .openDiv').slideDown(800, function() {
          Waypoint.refreshAll()
        })
    },{
        offset:80,
        continuous: false
    });


    $('#section3').waypoint(function(direction) {
        $('#section3 .openDiv').slideDown(800, function() {
          Waypoint.refreshAll()
        })
    },{
        offset:80,
        continuous: false
    });

    $('#section4').waypoint(function(direction) {
        $('#section4 .openDiv').slideDown(800, function() {
          Waypoint.refreshAll()
        })
    },{
        offset:80,
        continuous: false
    });

    $('#section5').waypoint(function(direction) {
        $('#section5 .openDiv').slideDown(800, function() {
          Waypoint.refreshAll()
        })
    },{
        offset:80,
        continuous: false
    });

    $('#section6').waypoint(function(direction) {
        $('#section6 .openDiv').slideDown(800, function() {
          Waypoint.refreshAll()
        })
    },{
        offset:80,
        continuous: false
    });


});

Answer 1

我根据这里的评论找到了解决方案 - Load page directly to anchor tag

虽然上述问题不是我的具体问题，但是动态地将锚点的ID添加到H1元素解决了我遇到的问题。

$(document).ready(function() {

    $('div.section1 h1').attr('id', 'section1');
    $('div.section2 h1').attr('id', 'section2');
    $('div.section3 h1').attr('id', 'section3');
    $('div.section4 h1').attr('id', 'section4');
    $('div.section5 h1').attr('id', 'section5');
    $('div.section5 h1').attr('id', 'section6');

});

此处可以看到已解决的示例 - http://jennoefur.co.uk/test/solved/page1.html

链接到另一页上的锚点落在错误的位置（Firefox）

1 个答案: