如何在长滚动页面上更改网址？

Question

我的任务是创建一个长页面，其中包含各种小文章供用户滚动浏览。每个文章部分都有一个类别，我需要URL来反映正在查看的类别。我知道history.pushState()可以在触发时用于更改URL。但是我不了解物流。

我已经找到了一种方法，可以使用以下代码将主菜单链接跳转到相应的类别，它似乎工作正常。

$('a.js-link').on('click',function (e) {
    e.preventDefault; // dont actually follow the link
    var category = $(this).data('category-id'); // get the id we should anchor to
    location.hash = '#' + category; // jump to the location hash id
    history.pushState("", "", category); // make the url pretty again
    return false; // dont append #category to the pretty url
});

但是，当用户向下滚动并且新类别开始显示时，URL应更改为example.com/category2（因为类别1是第一个并且将在初始页面加载时出现），用户继续滚动然后URL更改为example.com/category3。现在，如果用户向上滚动，它应该更改回example.com/category2。我只是在监听滚动事件，然后检查元素是否在视口中？如何处理页面上半部分显示上一个类别而下半部分显示下一个类别的情况？

我的另一个障碍是如何处理直接链接到页面上的特定类别。如果用户直接链接到example.com/category5，则应加载该页面并将其锚定到category5部分。

我应该提一下，我计划使用jquery.lazy.js加载主容器div中的类别，以减少初始页面加载时间。因此，我不能使用jquery向下滚动到一个元素，因为它计算元素/页面的大小并向下滚动该数量，但是一旦加载了内容，它就不再是视图中的适当类别。虽然如果它主要影响更改URL的能力，我愿意改变这种方法。

抱歉文字墙！我不是在找人为我编码，而是为了让我朝着正确的方向前进！

Answer 1

简短的回答是我通常使用// 1- Sets up state object that will store each page section 'state' var stateObj = { state0: "group" }; // 2- Setups up waypoint to indicate a new section var yourNameWaypoint = new Waypoint({ // 3- Target an ID for waypoints to watch, corresponds to a page section element: document.getElementById('page-id-target'), handler: function(direction) { // 4- Create down direction handler if (direction === 'down') { // 5- Assign stateObj a page state that corresponds to your page section stateObj = { state1: "page-section-1" }; history.replaceState(stateObj, "Section Title", "#new-page-section-slug-here"); } // 6- Do the same thing in the other direction now, reseting the URL to what it was before the waypoint was hit if (direction === 'up') { stateObj = { state0: "original-state" }; history.replaceState(stateObj, "Original Page Section Title", "original-page-slug-here"); } } }); 来完成此任务，但还有很多事情要做。 MDN描述了这种方法：

  

更新历史堆栈中的最新条目以获得   指定的数据，标题以及URL（如果提供）。数据被视为   DOM不透明;您可以指定任何可以的JavaScript对象   序列

实际上，这是如何解决的，我创建了一个状态对象，其中不同的状态是我的页面部分。我经常将它与优秀的结合使用，触发基于航点的状态变化。这段代码很容易理解，请阅读我的评论，它将引导您完成它。

init

要使散列与滚动位置相对应，有点困难。我修改了一个非常好的脚本来使其工作（Waypoints plugin），但我会在这里发布原文。

这个想法非常简单。基本上，您正在使用scrollToCurrent读取您在上面函数中创建的每个网址哈希history.pushState()，然后在匹配时将其提供给函数的(function(document, history, location) { var HISTORY_SUPPORT = !!(history && history.pushState); var anchorScrolls = { ANCHOR_REGEX: /^#[^ ]+$/, OFFSET_HEIGHT_PX: 50, /** * Establish events, and fix initial scroll position if a hash is provided. */ init: function() { this.scrollToCurrent(); $(window).on('hashchange', $.proxy(this, 'scrollToCurrent')); $('body').on('click', 'a', $.proxy(this, 'delegateAnchors')); }, /** * Return the offset amount to deduct from the normal scroll position. * Modify as appropriate to allow for dynamic calculations */ getFixedOffset: function() { return this.OFFSET_HEIGHT_PX; }, /** * If the provided href is an anchor which resolves to an element on the * page, scroll to it. * @param {String} href * @return {Boolean} - Was the href an anchor. */ scrollIfAnchor: function(href, pushToHistory) { var match, anchorOffset; if(!this.ANCHOR_REGEX.test(href)) { return false; } match = document.getElementById(href.slice(1)); if(match) { anchorOffset = $(match).offset().top - this.getFixedOffset(); $('html, body').delay(500).animate({ scrollTop: anchorOffset}); // Add the state to history as-per normal anchor links if(HISTORY_SUPPORT && pushToHistory) { history.pushState({}, document.title, location.pathname + href); } } return !!match; }, /** * Attempt to scroll to the current location's hash. */ scrollToCurrent: function(e) { if(this.scrollIfAnchor(window.location.hash) && e) { e.preventDefault(); } }, /** * If the click event's target was an anchor, fix the scroll position. */ delegateAnchors: function(e) { var elem = e.target; if(this.scrollIfAnchor(elem.getAttribute('href'), true)) { e.preventDefault(); } } }; $(document).ready($.proxy(anchorScrolls, 'init')); })(window.document, window.history, window.location); 部分。我发现我喜欢在滚动动画中加一点延迟使行为感觉更正常（设置在500ms以下，但你可以调整它）。

{{1}}