blocks|key|705055|text|在IE+<=+9中，这是不可能的，因为你想要的网址。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|705056|您可以查看有关如何使用jquery+here以编程方式滚动到元素的示例。|offset|length|705057|如果你不关心IE+<=+9，你可以使用window.history.replaceState()方法将当前的url替换为你想要的url，并避免导航。|705058|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6677035/jquery-scroll-to-element|1|https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_replaceState()_method^0|0|I|4|0|0|J|T|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

This is not possible in IE &lt;= 9 with the URL's you want.

you can see examples on how to programmatically scroll to an element with jquery <a href="https://stackoverflow.com/questions/6677035/jquery-scroll-to-element">here</a>.

If you don't care about IE &lt;= 9 you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_replaceState()_method" rel="nofollow noreferrer">window.history.replaceState()</a> method to replace the current url with the one you want, and avoid navigation.

blocks|key|4004106|text|在链接中调用部分想法的方法是关于，这将把你带到Example.com/#+<a+href="#about">about</a>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4004107|这里是一个JSFiddle示例，其中包含可以复制以实现平滑滚动的JQuery：+http://jsfiddle.net/gvee/LYqVk/1/|BOLD|4004108|只需单击一个链接，它就会滚动到该部分ID。|4004109|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/gvee/LYqVk/1/^0|11|Q|0|0|13|14|X|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|H]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|I|3|J|5|6|7|11|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

The way to call a section idea in a link is <code>&lt;a href="#about"&gt;about&lt;/a&gt;</code> and this will take you to example.com/#about

Here is a JSFiddle example with the JQuery you can copy for smooth scrolling:
<a href="http://jsfiddle.net/gvee/LYqVk/1/" rel="nofollow">http://jsfiddle.net/gvee/LYqVk/1/</a>

Just click a link and it scrolls to that section ID.

blocks|key|713593|text|jQuery可以让你滚动到一个位置，但你需要的不仅仅是jQuery。您需要使用一个web框架来解释url路径(如/about/或/works/)，并将其作为参数传递给页面。例如，如果您的站点实际上只有一个页面，则需要配置您的框架(可以是.NET+MVC、Struts2、NodeJS等)。无论路径如何，始终返回同一页，但采用该路径并以某种方式将其插入到页面上，可以是HTML或JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|713594|例如,|713595|var+desiredSection+=+"<%25=blah%25>";+//+if+you+are+using+Java+JSPs|code-block|syntax|javascript|713596|一旦将该值赋给JavaScript变量，就可以使用jQuery或JavaScript滚动库来执行其他答案中提到的操作。|713597|需要注意的一件事是，这将产生一个潜在的XSS安全问题，所以如果您在一个面向公众的网站上使用它，请务必小心。|713598|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

jQuery will let you scroll to a location, but you will need more than jQuery. You will need to use a web framework that will interpret the url path (like /about/ or /works/) and pass that as a parameter to the page. For example, if your site is really just one page, you will need to configure your framework (be it .NET MVC, Struts 2, NodeJS, etc.) to always return the same page no matter the path, but to take that path and insert it on the page in some way, either into the HTML or the JavaScript.

For example, 

<pre><code>var desiredSection = "&lt;%=blah%&gt;"; // if you are using Java JSPs
</code></pre>

Once you have that value assigned to a JavaScript variable, you can use some jQuery or JavaScript scrolling library to perform the action as mentioned in other answers.

One thing to be aware of is that this will create a potential XSS security issue so be careful if you are using this on a public-facing website.

blocks|key|4004202|text|为此，您可以使用<a+href="#id">Go+to+#id</a>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4004203|如果你假装id被附加到URL上，在滚动的时候没有重新加载，这就有点棘手了：|4004204|//+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%2B%2B)+{
+++++++var+$section+=+$(sections[i]);
+++++++if(scroll+>=+$section.offset().top)+{

+++++++++//+Will+change+URL+without+reloading,+affecting+the+history
+++++++++history.replaceState("data",
++++++++++++++++++++++++++++++"title",
++++++++++++++++++++++++++++++location.origin+%2B+location.pathname+%2B+"#"+%2B
++++++++++++++++++++++++++++++$section.attr('id'));
++++}
});|code-block|syntax|javascript|4004205|entityMap^0|8|R|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

First for scrolling on page load you can use an already built-in feature. When you enter the URL and append <code>#id</code> it will scroll right away. You use <code>&lt;a href="#id"&gt;Go to #id&lt;/a&gt;</code> for this.

If you pretend the id to be appended to the URL, while scrolling and without reloading that is a little tricky:

<pre><code>// 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 &lt; sections.length; i++) {
 var $section = $(sections[i]);
 if(scroll &gt;= $section.offset().top) {

 // Will change URL without reloading, affecting the history
 history.replaceState("data",
 "title",
 location.origin + location.pathname + "#" +
 $section.attr('id'));
 }
});
</code></pre>

blocks|key|2617229|text|要在浏览器中更改url，您可以使用以下命令|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617230|window.location.href+=+window.location.href.replace(/#(.*)$/,+'')+%2B+'#'+%2B+'section_id';|code-block|syntax|javascript|2617231|你需要使用#，因为这是在可滚动的单页面上的客户端路由，所以你可以实现example.com#about。|2617232|这对你应该是有效的->+http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url|offset|length|2617233|Ps。我知道，我在2015年问过，但仍然没有一个被接受的答案。|2617234|entityMap|0|LINK|mutability|MUTABLE|url|http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url^0|0|0|0|C|31|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

To change the url in browser you can use this

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

You need to use # as this is a client side routing on scrollable single page, so you can achieve example.com#about. Using / could be possible with server side routes and requires loading a new page. 

This should work for you -> <a href="http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url" rel="nofollow noreferrer">http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url</a>

Ps. I know, asked in 2015 but still without an accepted answer.

I want to add page section ID to the end of the URL in address bar while scrolling:

for example

<pre><code>&lt;section id="home"&gt;&lt;/section&gt;
&lt;section id="about"&gt;&lt;/section&gt;
&lt;section id="works"&gt;&lt;/section&gt;
</code></pre>

<a href="http://example.com/about/" rel="nofollow">http://example.com/about/</a>

or 

<a href="http://example.com/works/" rel="nofollow">http://example.com/works/</a>

and of course when it's the home page remove the uri string.

and On page load I want the page scroll to the section requested, and I do not want it to just jump to that section. 

Are there any jQuery written codes?! How can I do that?!

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在滚动时将页面部分ID添加到地址栏中URL的末尾：例如<section id="home"></section><section id="about"></section><section id="works"></section>或当然，当它是主页时，删除uri字符串。在页面加载时，我希望页面滚动到请求的部分，而...

问在滚动页面时将页面部分id添加到地址栏中
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在滚动页面时将页面部分id添加到地址栏中EN