This question already has an answer here:
这个问题在这里已有答案:
- Avoid window jump to top when clicking #-links 12 answers
单击#-links 12 answers时,避免窗口跳转到顶部
Is there a way of avoiding the jump when clicking on an anchor link? So that the view does not change.
点击锚链接有没有办法避免跳转?这样视图就不会改变。
3 个解决方案
#1
17
The most semantic and meaningful approach to this problem would be to handle the onclick event from within JavaScript. Ideally this file would be best to be stored in a seperate file, however, including a in-line script within your problem file would suffice. Here's how i'd recommended approaching this problem if your already using a JavaScript library like jQuery.
解决此问题的最具语义和意义的方法是从JavaScript中处理onclick事件。理想情况下,此文件最好存储在单独的文件中,但是,在问题文件中包含内联脚本就足够了。如果您已经使用了像jQuery这样的JavaScript库,那么我建议如何解决这个问题。
Assign an ID
Include an id attribute to your anchor so it's able to be selected using jQuery:
分配ID为您的锚包含一个id属性,以便能够使用jQuery选择它:
<a href="#anchor" id="mylink" title="Title Here">Link Text</a>
Bind click event
From within your JavaScript file / in-line script include the following:
绑定点击事件从您的JavaScript文件/内联脚本中包含以下内容:
$('#mylink').click(function(event) {
// This will prevent the default action of the anchor
event.preventDefault();
// Failing the above, you could use this, however the above is recommended
return false;
});
The method above is explained in full using the jQuery API websites: http://api.jquery.com/event.preventDefault/
上面的方法使用jQuery API网站完整解释:http://api.jquery.com/event.preventDefault/
#2
14
Just use:
<a href="javascript:void(0);">Text</a>
#3
1
You could use Javascript to prevent the default behaviour of the link, a simple example being:
您可以使用Javascript来阻止链接的默认行为,一个简单的例子是:
<a href="#myanchor" onclick="return false;">link</a>
#1
17
The most semantic and meaningful approach to this problem would be to handle the onclick event from within JavaScript. Ideally this file would be best to be stored in a seperate file, however, including a in-line script within your problem file would suffice. Here's how i'd recommended approaching this problem if your already using a JavaScript library like jQuery.
解决此问题的最具语义和意义的方法是从JavaScript中处理onclick事件。理想情况下,此文件最好存储在单独的文件中,但是,在问题文件中包含内联脚本就足够了。如果您已经使用了像jQuery这样的JavaScript库,那么我建议如何解决这个问题。
Assign an ID
Include an id attribute to your anchor so it's able to be selected using jQuery:
分配ID为您的锚包含一个id属性,以便能够使用jQuery选择它:
<a href="#anchor" id="mylink" title="Title Here">Link Text</a>
Bind click event
From within your JavaScript file / in-line script include the following:
绑定点击事件从您的JavaScript文件/内联脚本中包含以下内容:
$('#mylink').click(function(event) {
// This will prevent the default action of the anchor
event.preventDefault();
// Failing the above, you could use this, however the above is recommended
return false;
});
The method above is explained in full using the jQuery API websites: http://api.jquery.com/event.preventDefault/
上面的方法使用jQuery API网站完整解释:http://api.jquery.com/event.preventDefault/
#2
14
Just use:
<a href="javascript:void(0);">Text</a>
#3
1
You could use Javascript to prevent the default behaviour of the link, a simple example being:
您可以使用Javascript来阻止链接的默认行为,一个简单的例子是:
<a href="#myanchor" onclick="return false;">link</a>