浏览到同一页面而不刷新

Question

我是ASP，JS，HTML5的新手。 我正在写一个由ASP.net驱动的快速内部网站，该网站具有Prev和Next按钮。 每次用户按下“下一步”按钮时，都需要滚动到下一个书签。 但是，在我看来，每次都从服务器刷新页面。

在不刷新的情况下，创建指向同一页面的JavaScript链接的最直接方法是什么？ 目前，我的ID为“＃1”，并且正在使用

button onclick="JavaScript:window.location.hash = '#1'

我尝试了许多变体，但似乎都没有用。

请注意：我仅尝试导航到同一页面上的书签。 不需要数据去服务器，也不需要以任何方式更改页面。

（编辑：在代码中将“替换”更改为“哈希”，因为这引起了混乱）。

Answer 1

而不是使用window.location.replace ，而是尝试简单地分配给window.location或window.location.href或window.location.hash 。

恐怕其他答复者要么不理解问题，要么不理解问题。 当然，您可以跳转到ID标识的页面上的某个位置，而无需重新加载它。 这是浏览器工作方式的基础。 这是window.location.reload函数存在的原因之一，因此您可以根据需要重新加载它。 您也不局限于使用href导航到ID。 当然，您可以使用window.location来做到这一点（只是不能使用window.location.replace来做到）。

更新：您尝试执行的操作没有任何问题，也没有办法重新加载页面。 您的页面中肯定还有其他原因导致这种现象，尽管我无法想象这可能是什么。 尝试一个真正简单的测试用例，然后从那里开始。

Answer 2

您需要做的是使一些具有id属性的元素和<a href>元素链接到具有散列的那些项目：

<h3 id="section_1">Section One</h3>
<p>...</p>
<div>Prev | <a href="#section_2">Next</a></div>

<h3 id="section_2">Section Two</h3>
<p>...</p>
<div><a href="#section_1">Prev</a> | <a href="#section_3">Next</a></div>

<h3 id="section_3">Section Three</h3>
<p>...</p>
<div><a href="#section_2">Prev</a> | Next</div>

这些线中的东西...

Answer 3

原来，我的按钮在表单内。 除了使用window.location.hash ='＃1'之外，还必须将按钮类型设置为button。 如果未明确设置按钮类型，则默认情况下它会执行提交 ，这是导致页面刷新的原因。 否则，按钮可能不应该采用某种形式。

<button type='button' onclick="JavaScript:window.location.hash = '#1'">Navigate without refresh
</button>

Answer 4

您可能想看一下JQuery Ajax ，它可以为您提供所需的行为，即无需刷新页面，执行一些涉及与服务器通信并返回响应的操作。