Question

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

例如

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

http://example.com/about/

或

http://example.com/works/

当然，当主页删除uri字符串时。

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

有没有jQuery编写的代码？！我怎么能这样做？！

Answer 1

在链接中调用部分构思的方法是<a href="#about">about</a>，这会将您带到example.com/#about

这是一个JSFiddle示例，您可以复制JQuery以进行平滑滚动： http://jsfiddle.net/gvee/LYqVk/1/

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

Answer 2

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

例如，

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

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

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

Answer 3

首先，在页面加载时滚动，您可以使用已内置的功能。当您输入网址并附加#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'));
    }
});

Answer 4

要更改浏览器中的网址，您可以使用此

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

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

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

聚苯乙烯。我知道，在2015年问过，但仍然没有接受答案。

Answer 5

这在IE＆lt; = 9中无法使用您想要的URL。

您可以看到有关如何使用jquery here以编程方式滚动到元素的示例。

如果您不关心IE＆lt; = 9，可以使用window.history.replaceState()方法将当前网址替换为您想要的网址，并避免导航。

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

5 个答案: