Question

我的网站上有一个'a'链接，在我的页面中附加了一个jQuery函数。这个链接的'href'是'＃'，因为页面不需要为我的jQuery重新加载。但是，无论何时单击链接，它都会再次转到页面顶部。这很烦人，因为链接相当远，所以你必须再次找到你的阅读位置。有办法......

停止链接将您带回到顶部（可能使用JavaScript？）
或者可以选择执行相同工作的“＃”，但不会将您带到页面顶部。

Answer 1

href="#"表示＆＃34;链接到页面顶部＆＃34;，所以你一定要找一些东西而不是它。

链接去了地方，你不想去任何地方，所以你不应该使用链接。

改为使用按钮。

<button type="button">Label</button>

这假设你绝对不能使用progressive enhancement，这样如果JavaScript失败（which it will），那么加载新页面将得到相同的最终结果（尽管效率较低）。

如果你可以使用渐进增强功能，那么你应该使用一个有用的链接：

<a href="/handle/it/on/the/server">Label</a>

然后阻止默认操作：

jQuery("a").on("click", handler);

function handler(event) {
    doSomethingWithJS();
    event.preventDefault();
}

Answer 2

作为@ Quentin答案的替代方案，如果使用链接，因为你想“去某个地方”，而不是重新加载/新页面，请使用语义片段标识符：

body { font-size: 28px; } /* for testing */

<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>

链接到＃时，请保持在页面上的当前位置

2 个答案: