链接到另一个页面上的锚落在错误的位置 (Firefox)
Linking to an anchor on another page lands in the wrong place (Firefox)
我有一个包含不同 div 的长页面，每个 div 包含相当多的内容。当您登陆页面时，此内容会隐藏，然后在您到达每个部分的标题后展开，方法是单击锚点 link 或滚动。我正在使用 jQuery Waypoints 来执行此操作。
在此页面上一切正常。我的问题是，如果 link 从另一个页面转到这些锚点之一，一些 Waypoints 在滚动时会触发，增加页面的高度，所以你最终会在错误的地方。
这似乎只发生在 Firefox - Chrome 并且 IE 在正确的位置着陆，只有正确的 Waypoint 被触发。
我在 http://jennoefur.co.uk/test/page1.html 有一个例子。如果您在导航中转到 'Page 2'，然后转到 'Section 6'，您应该会看到问题。
抱歉，如果这在某种程度上是重复的，我一直在搜索和搜索，但找不到答案或解决方案。非常感谢您的帮助，这是我问的第一个问题，所以如果您能提供我可能出错的地方的任何指导，我们将不胜感激！
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（对于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
});
});
我根据此处的评论找到了解决方案 - 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
我有一个包含不同 div 的长页面，每个 div 包含相当多的内容。当您登陆页面时，此内容会隐藏，然后在您到达每个部分的标题后展开，方法是单击锚点 link 或滚动。我正在使用 jQuery Waypoints 来执行此操作。
在此页面上一切正常。我的问题是，如果 link 从另一个页面转到这些锚点之一，一些 Waypoints 在滚动时会触发，增加页面的高度，所以你最终会在错误的地方。
这似乎只发生在 Firefox - Chrome 并且 IE 在正确的位置着陆，只有正确的 Waypoint 被触发。
我在 http://jennoefur.co.uk/test/page1.html 有一个例子。如果您在导航中转到 'Page 2'，然后转到 'Section 6'，您应该会看到问题。
抱歉，如果这在某种程度上是重复的，我一直在搜索和搜索，但找不到答案或解决方案。非常感谢您的帮助，这是我问的第一个问题，所以如果您能提供我可能出错的地方的任何指导，我们将不胜感激！
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（对于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
});
});
我根据此处的评论找到了解决方案 - 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