在滚动页面时将页面部分 ID 添加到地址栏

add page section id to the address bar on scrolling the page

本文关键字：ID 添加 地址栏 滚动 面部      更新时间：2023-09-26

我想在滚动时将页面部分ID添加到地址栏中URL的末尾：

例如

<section id="home"></section>
<section id="about"></section>
<section id="works"></section>

http://example.com/about/

或

http://example.com/works/

当然，当它是主页时，删除 URI 字符串。

和 在页面加载时，我希望页面滚动到请求的部分，我不希望它只是跳转到该部分。

有没有jQuery编写的代码？！我该怎么做？！

这在

IE <= 9中是不可能的，其中包含您想要的URL。

您可以在此处查看有关如何使用 jQuery 以编程方式滚动到元素的示例。

如果你不关心IE <= 9，你可以使用window.history.replaceState（）方法将当前URL替换为你想要的url，并避免导航。

在链接中调用部分想法的方法<a href="#about">about</a>，这将带您进入 example.com/#about

下面是一个带有 JQuery 的 JSFiddle 示例，您可以复制以实现平滑滚动：http://jsfiddle.net/gvee/LYqVk/1/

只需单击一个链接，它就会滚动到该部分 ID。

jQuery将允许您滚动到一个位置，但您需要的不仅仅是jQuery。您将需要使用一个 Web 框架来解释 url 路径（如/about/或/works/），并将其作为参数传递给页面。例如，如果你的站点实际上只是一个页面，你将需要配置你的框架（无论是.NET MVC，Struts 2，NodeJS等）始终返回相同的页面，无论路径如何，但采用该路径并以某种方式将其插入到页面上，无论是HTML还是JavaScript。

例如 

var desiredSection = "<%=blah%>"; // if you are using Java JSPs

将该值分配给 JavaScript 变量后，您可以使用一些 jQuery 或 JavaScript 滚动库来执行其他答案中提到的操作。

需要注意的一件事是，这将产生潜在的XSS安全问题，因此如果您在面向公众的网站上使用它，请小心。

首先，对于页面加载时的滚动，您可以使用已经内置的功能。当您输入 URL 并附加#id它将立即滚动。为此，您可以使用<a href="#id">Go to #id</a>。

如果您假装将 id 附加到 URL，同时滚动并且没有重新加载，这有点棘手：

// Order by position from top to bottom
var sections = $("#home, #about, #works"); // or $("section");
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    for(var i = 0; i < sections.length; i++) {
       var $section = $(sections[i]);
       if(scroll >= $section.offset().top) {
         // Will change URL without reloading, affecting the history
         history.replaceState("data",
                              "title",
                              location.origin + location.pathname + "#" +
                              $section.attr('id'));
    }
});

要在浏览器中更改网址，您可以使用这个

window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + 'section_id';

您需要使用 #，因为这是可滚动单个页面上的客户端路由，因此您可以实现 example.com#about。使用/可以与服务器端路由一起使用，并且需要加载新页面。

这应该适合您 -> http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url

附言。我知道，在 2015 年问过，但仍然没有被接受的答案。

相关文章：