我正在设计一个带有粘性菜单栏的网站。我试图在真实加载或点击菜单栏上的某个地方时将页面粘贴到内容区域并且它一直跳到顶部。
答案 0 :(得分：1)
一些提示是：
避免重新加载页面，通过单页应用程序（基本上，使用javascript，您获取新内容并将其插入页面而不重新加载）
使用一些javascript，跟踪用户在页面上的位置，并将该信息（y位置）放在菜单栏中的链接中。然后，在加载时，另一个JS脚本获取该信息并滚动。但那有点脏。
在链接中使用锚点（＃）和ID，以便浏览器自动将用户滚动到页面的一部分
答案 1 :(得分：0)
我确信有几种方法可以为这只猫设置外观，但链接到页面元素ID可能有助于将用户返回到您想要的位置？
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
background-color: grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="nav">
<a href="#lastParagraph">Bottom Paragraph</a>
<a href="#nearTop">Near Top</a>
<a href="http://mysitesomewhere.com/index.html#idNearTheBottom">somewhere else</a>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p id="nearTop">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p id="lastParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
</div>
</div>