jQuery 如何防止在锚点点击时跳转？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14185974/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent jump on an anchor click?
提问by A. Z.
I use e.preventDefault();to disable default anchor behaviour.
我e.preventDefault();用来禁用默认锚点行为。
Is there a way to prevent only jump action to a target on click?
有没有办法防止只在点击时跳转到目标？
I tried:
我试过：
var hash = window.location.hash;
var link = $('a');
$('a').click(function() {
e.preventDefault();
hash = "#"+link.attr("href");
});
But it doesn't work: http://jsfiddle.net/ynts/LgcmB/.
但它不起作用：http: //jsfiddle.net/ynts/LgcmB/。
回答by Muhammad Talha Akbar
$(document).ready(function() {
var hash = window.location.hash;
var link = $('a');
$('a').click(function(e) {
e.preventDefault();
hash = link.attr("href");
window.location = hash;
});
});
You also have to specify event argument in the function. By naming it as eor eventand then you can manipulate it.
您还必须在函数中指定事件参数。通过将其命名为eorevent然后您可以对其进行操作。
回答by TaeKwonJoe
This is the only solution I could come up with that works consistently across all desktop and mobile browsers with various client UI libraries and frameworks. By getting the window coordinates before scrolling occurs we can revert and maintain the current scroll position.
这是我能想出的唯一解决方案，它可以在具有各种客户端 UI 库和框架的所有桌面和移动浏览器中始终如一地工作。通过在滚动发生之前获取窗口坐标，我们可以恢复并保持当前的滚动位置。
$('a').click(function (e) {
var x = window.pageXOffset,
y = window.pageYOffset;
$(window).one('scroll', function () {
window.scrollTo(x, y);
})
});
回答by jumois
To onlyprevent the "jump" you have to use different id for the target element than what is specified in the anchor.
为了仅防止“跳转”，您必须为目标元素使用与锚中指定的不同的 id。
e.g. for a link to a new tab use,
例如，对于新标签使用的链接，
<a href="#new" />
and for the target element mask the id
并且对于目标元素掩码 id
<div id="new-tab"></div>
Then in your script append the mask to the real hash, and use it to get the element.
然后在您的脚本中将掩码附加到真正的散列，并使用它来获取元素。
$(window).on("hashchange", function(){
var hash = this.location.hash;
var mytab = $(hash + "-tab");
});
This preserves the hash location changes in browser history that can be controlled by the back/forward buttons, and detected on page load with the hashchangeevent if user enters the page with hash specified.
这会保留浏览器历史记录中的哈希位置更改，这些更改可以由后退/前进按钮控制，hashchange如果用户使用指定的哈希进入页面，则在页面加载时检测到该事件。
回答by Sergei Smirnov
You should bind an onclick event to anchor and specify return false;as a result.
The return false;statement causes default click behaviour (jump) would not work.
You can find more info here: How to disable anchor "jump" when loading a page?
您应该绑定一个 onclick 事件来锚定并指定return false;结果。该return false;语句导致默认点击行为（跳转）不起作用。您可以在此处找到更多信息：如何在加载页面时禁用锚点“跳转”？
回答by AgnosticDev
You need to pass the event on the function.
您需要在函数上传递事件。
var hash = window.location.hash;
var link = $('a');
//pass event here
$('a').click(function(e) {
e.preventDefault();
hash = "#"+link.attr("href");
});
回答by Fanky
You can use matchwith ^to detect starting with #
您可以使用matchwith^来检测以#
$("a:link").on("click", function(e){
if($(this).attr("href").match("^#")) {
e.preventDefault();
//some other stuff you want to do with the hash, like smooth scroll to anchor
$('html, body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'fast');
}
});
回答by Daniel
After first trying the other answers on this page, this was all I needed:
在第一次尝试此页面上的其他答案后，这就是我所需要的：
$('a').click(function (e) {
e.preventDefault();
});