当我滚动浏览它时，如何将标题的锚点添加到地址栏？

Question

我有一个很长的 one-pager，包含不同的部分，每个部分都在自己的 <article id="section-title"> 中。我想以 Netlify 文档 (see example) 的风格添加导航，它通过在滚动时附加当前部分的 id 来更改地址栏。我认为如果它在第一部分之前滚动到顶部时返回原始 URL （没有锚点）会更好。虽然，我不知道从哪里开始或如何寻找具有此功能的插件。

如何使用 jQuery 完成所有这些操作？

Answer 1

这个问题有点广泛，我很惊讶它没有关闭，但由于你是新来的，我会给你一个良好的开端，你在这个网站上有你需要的一切：

您需要：

1- 看看你的文章是否在view-port中，然后提取id。关于这个主题，您有几个不同的解决方案：

2- 您需要在不重新加载的情况下更新地址栏 URL，您需要在下一主题中学习如何操作：Updating address bar with new URL without hash or reloading the page and How do I modify the URL without reloading the page?

我已经向您展示了其工作原理的基本示例：

<html>

<body>
  <header>
    <style type="text/css">
      section {
        min-height: 300px
      }
    </style>
  </header>
  <section id="section1"> section 1</section>
  <section id="section2"> section 2</section>
  <section id="section3"> section 3</section>
  <section id="section4"> section 4</section>
  <script type="text/javascript">
    var isInViewport = function(elem) {
      var distance = elem.getBoundingClientRect();
      return (
        distance.top >= 0 &&
        distance.left >= 0 &&
        distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        distance.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    };

    var findMe = document.querySelectorAll('section');

    window.addEventListener('scroll', function(event) {
      // add event on scroll
      findMe.forEach(page => {
        //for each .page
        if (isInViewport(page)) {
          //if in Viewport
          console.clear();
          console.log(page.id);
          // exampla with hash #:
          //document.location.hash = page.id;

          //new url
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + page.id;
          window.history.pushState({
            path: newurl
          }, '', newurl);
        }
      });
    }, false);
  </script>
</body>

</html>

这足以让您自己动手了。先在这里搜索主题寻找答案，然后如果您遇到代码的某些部分，请随时寻求帮助。

欢迎来到 SO，祝你好运。

当我滚动浏览它时，如何将标题的锚点添加到地址栏？

How can I add a heading’s anchor to the address bar as I scroll through it?

navigation

anchor

jquery

scroll

hyperlink