滚动时更改网址答案

【问题标题】：change url while scrolling滚动时更改网址
【发布时间】：2015-06-09 14:11:12
【问题描述】：

单击导航按钮时，我正在使用 jQuery 更改 URL 哈希。但是当我使用鼠标滚轮滚动时，URL 不会改变。我怎样才能做到这一点？如何使用

window.history.pushState(“object or string”, “Title”, “/new-url”);

我无法理解。请帮忙我的 JavaScript 代码

$j(document).ready(function () {
    $j("#start1").click(function (e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $j("html, body").animate({
            scrollTop: $j(sectionClean).offset().top
        }, 1000, function () {
            window.location.hash = sectionClean;
        });
    });
});
$j(document).ready(function () {
    $j("#start2").click(function (e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $j("html, body").animate({
            scrollTop: $j(sectionClean).offset().top
        }, 1000, function () {
            window.location.hash = sectionClean;
        });
    });
});

和html代码是

<a href="#home" id="start1"style="text-decoration:none;position:absolute;right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;transition:0.5s"  onmouseover="big(this)" onmouseout="small(this)"><span >HOME</span></a>
<span><a href="#products" id="start2" style="text-decoration:none;position:absolute;right:250px;top:37px;font-weight:bold;color:white;font-size:15px;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">PRODUCTS & SERVICES</a></span>

【问题讨论】：

你的导航按钮怎么样？
我正在编辑问题，请参阅
你说你想在用户滚动页面时做点什么，但是你的代码在哪里负责处理onscroll event？
@sergey 实际上在我的页面上，我有在点击链接时更改 url 的效果，但我在滚动时无法执行此操作。所以我想知道怎么做，因为我不知道这个
您可能会发现这个问题的答案很有帮助：stackoverflow.com/questions/14660580/…

标签： javascript jquery html try-catch

【解决方案1】：

这里有一些代码可能对您有所帮助 - 它侦听 scroll 事件，并检查是否有任何 anchor 元素在视口中。如果是，则 URL 哈希将更新为 window.history.pushState。

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Scrolling URL Hash</title>
  <meta name="description" content="Webpage for xxxx">
  <style>
    body {
      height: 2000px;
    }
    a > div {
      min-height: 500px;
    }
  </style>
  </head>
  <body> 
  <a href="#anchor1" id="anchor1" class="anchor"><div>ANCHOR 1</div></a>
  <a href="#anchor2" id="anchor2" class="anchor"><div>ANCHOR 2</div></a>
  <a href="#anchor3" id="anchor3" class="anchor"><div>ANCHOR 3</div></a>
  <a href="#anchor4" id="anchor4" class="anchor"><div>ANCHOR 4</div></a>
  <a href="#anchor5" id="anchor5" class="anchor"><div>ANCHOR 5</div></a>
  <a href="#anchor6" id="anchor6" class="anchor"><div>ANCHOR 6</div></a>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
    // stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
    function isElementInViewport (el) {
      //special bonus for those using jQuery
      if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
      }
      var rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
      );
    }
    // click-to-scroll behavior
    $(".anchor").click(function (e) {
      e.preventDefault();
      var section = this.href;
      var sectionClean = section.substring(section.indexOf("#"));
      $("html, body").animate({
        scrollTop: $(sectionClean).offset().top
      }, 1000, function () {
        window.location.hash = sectionClean;
      });
    });
    // listen for the scroll event
    $(document).on("scroll", function() {
      console.log("onscroll event fired...");
      // check if the anchor elements are visible
      $(".anchor").each(function (idx, el) {
        if ( isElementInViewport(el) ) {
          // update the URL hash
          if (window.history.pushState) {
            var urlHash = "#" + $(el).attr("id");
            window.history.pushState(null, null, urlHash);
          }
        }
      });
    });
  </script>
  </body>
</html>

【讨论】：

有时 url 改变，有时却不使用它
函数isElementInViewport检查整个元素是否可见。如果不是（例如，如果您的浏览器窗口小于元素），则 URL 不会更改。
您可以通过使锚元素尽可能小（而不是 min-height: 500px，如本例）或修改 isElementInViewport 来解决此问题。
当我快速滚动时，网址不会改变，但当我慢慢滚动时，它正在工作'
我不确定那里发生了什么 - 我无法通过快速滚动来重现它。我能想到的就是快速滚动时整个元素可能不会渲染到视口。

【解决方案2】：

您可以使用 waypoint.js。 http://imakewebthings.com/waypoints/guides/getting-started/

这是来自页面的示例代码，当到达航点时抛出一个新的哈希。

var waypoint = new Waypoint({ element: document.getElementById('element-waypoint'), handler: function(direction) { notify(this.element.id + ' triggers at ' + this.triggerPoint) }, offset: '75%' })

【讨论】：