避免在单击 # 链接时窗口跳到顶部

Avoid window jump to top when clicking #-links

本文关键字：窗口 顶部 链接 单击      更新时间：2023-09-26

我有一个页面，里面有一些问题和答案，默认情况下答案是折叠的。当他们点击问题时，我会展开隐藏的答案div。问题是，当我单击这些问题时，窗口会跳到屏幕顶部。这不是一个大问题，但我觉得它很烦人，因为我必须再次向下滚动到这个问题。

链接看起来像这样：

<a href="#" id="myID">Myquestion</a>

我使用jQuery和.click作为事件监听器。

是否有任何简单的方法可以避免这种情况，或者我是否必须使用.scroll并找到问题的坐标？我宁愿避免这种情况。

编辑：我知道我可以使用锚点来做到这一点，但我想避免任何屏幕跳跃。

您需要

将preventDefault()添加到点击处理程序中。这将停止浏览器执行它自己的链接处理程序，并且只会运行您指定的代码。

例：

$("#myID").click(function(e) {
    e.preventDefault();
    // Do your stuff
});

不要将 A 标记用于与导航无关的任务。它不是语义标记，也不会正常降级。请改用按钮。

你可以非常简单地做到这一点：只需在href末尾添加!：

<a href="#!" id="myID">Myquestion</a>

另一种jQuery方式是：

$("#myID").click(function(e) {
    e.preventDefault(); // one way 
    return false; // second way prevent default click action from happening
});

$("#myID").click(function(e) {
    if(e.preventDefault)
        e.preventDefault();
    else
        e.stop();
});

仅e.preventDefault()在旧版本的IE中不起作用。

实际上，最简单的方法是从锚标记中删除 href 属性。 从HTML5开始，锚标记不需要包含href属性即可成为语义。

所以

<a id="myID">Myquestion</a>

而不是

<a href="#" id="myID">Myquestion</a>

这适用于IE8+，Chrome和Firefox。请注意，：link css 样式不适用于不包含 href 属性的锚标记。

如果您需要 href 属性和/或 IE7 兼容性，则 

$("#myID").click(function(e) {
if(e.preventDefault)
    e.preventDefault();
else
    e.stop();
});

可能是最好的方法。

$('a').click( function() {
  if ($(this).attr("href") == window.location.hash) {
    event.preventDefault()
  }
});

你正在寻找event.preventDefault(参见jQuery API(。

$(...).click(function(e) {
  e.preventDefault();
  // your code
});

滚动以回答内容的示例：

$("#question_title").click(function(){
  var $answer=$("#answer");
  $answer.slideDown();
  $.scrollTo( $answer, 800 );
  return false;
});

我使用的是jQuery scrollTo插件。

在你的函数中：

And I've used jQuery and .click as event-listener.

将看起来像这样：

$("#myID").click(function(){});

将其更改为(不要忘记function(e)中的参数 e：

$("#myID").click(function(e){
    e.preventDefault();
});

$('body').on('click', '[href^=#]', function (e) { e.preventDefault() });

如果选择器例如.."body"在初始渲染期间存在，然后使用任何选择器..嗡......以常规为目标，让 jQuery(从 1.8.2 开始(迭代。"On handler 调用一个名为"bind"的方法，该方法用于新添加到 DOM 的内容"，。使用 "[href^=#] 将选择分区标记中的任何 href，但您可以将部分替换为任何内容或没有任何内容，并且它会对点击事件应用取消。此技术非常适合动态创建的内容到 DOM

如果你在"#"中添加一个"''"，它将阻止进入顶部。

<a href="#'" id="myID">Myquestion</a>

HTML： 

<a id="like-post" href="#'">like</a>

JavaScript：

$('body').delegate('#like-post','click',function(e) {
     e.preventDefault();
     .....
});
相关文章：