重新加载时停止页面跳转到顶部[重复]

Question

我正在设计一个带有粘性菜单栏的网站。我试图在重新加载或单击菜单栏上的某个位置时使页面粘在内容区域，并且它一直跳到顶部。

Answer 1

我确信有几种方法可以给这只猫换皮，但与页面元素 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>

Answer 2

一些提示是：

• 通过执行单页应用程序来避免重新加载页面（基本上，使用 javascript，您可以获取新内容并将其插入页面而无需重新加载）

• 使用一些 javascript，跟踪用户在页面上的位置，并将该信息（y 位置）放在菜单栏中的链接中。然后，在加载时，另一个 JS 脚本会获取该信息并滚动。但这有点脏。

• 在链接中使用锚点 (#) 和 ID，以便浏览器自动将用户滚动到页面的一部分