在滚动页面时将页面部分id添加到地址栏中
我想在滚动时将页面部分ID添加到地址栏中URL的末尾：
例如
<section id="home"></section>
<section id="about"></section>
<section id="works"></section>http://example.com/about/
或
http://example.com/works/
当然，当它是主页时，删除uri字符串。
在页面加载时，我希望页面滚动到请求的部分，而不是跳到该部分。
有没有jQuery写的代码？！我怎么能这么做呢？！
回答 5
Stack Overflow用户
发布于 2015-01-09 02:16:34
在链接中调用部分想法的方法是关于，这将把你带到Example.com/# <a href="#about">about</a>
这里是一个JSFiddle示例，其中包含可以复制以实现平滑滚动的JQuery： http://jsfiddle.net/gvee/LYqVk/1/
只需单击一个链接，它就会滚动到该部分ID。
Stack Overflow用户
发布于 2015-01-09 02:18:24
jQuery可以让你滚动到一个位置，但你需要的不仅仅是jQuery。您需要使用一个web框架来解释url路径(如/about/或/works/)，并将其作为参数传递给页面。例如，如果您的站点实际上只有一个页面，则需要配置您的框架(可以是.NET MVC、Struts2、NodeJS等)。无论路径如何，始终返回同一页，但采用该路径并以某种方式将其插入到页面上，可以是HTML或JavaScript。
例如,
var desiredSection = "<%=blah%>"; // if you are using Java JSPs一旦将该值赋给JavaScript变量，就可以使用jQuery或JavaScript滚动库来执行其他答案中提到的操作。
需要注意的一件事是，这将产生一个潜在的XSS安全问题，所以如果您在一个面向公众的网站上使用它，请务必小心。
Stack Overflow用户
发布于 2015-01-09 02:20:34
为此，您可以使用<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'));
}
});https://stackoverflow.com/questions/27846766
复制相似问题
腾讯云开发者
