Javascript 单击#-links 时避免窗口跳到顶部

Avoid window jump to top when clicking #-links

提问by OptimusCrime

I've got a page with some questions and answers, the answers are collapsed by default. When they click the question I expand the hidden answer-div. The problem is that when I click these questions, the window jump to the top of the screen. This is not a huge problem, but I find it annoying, because I have to scroll down to the question again.

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

The links simply looks like this:

链接看起来像这样：

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

And I've used jQuery and .clickas event-listener.

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

Are there any simple ways to avoid this, or do I have to use .scrolland finding the coordinates of the question? I'd rather avoid this.

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

EDIT: I know that I can use anchors to do this, but I'd like to avoid any jumping of the screen at all.

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

回答by Rory McCrossan

You need to add preventDefault()to your click handler. This will stop the browser executing it's own link handler, and will only run the code you specify.

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

Example:

例子：

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

回答by Jonas H?gh

Don't use A tags for tasks that are not navigation-related. It is not semantic markup, and doesn't degrade gracefully. Use buttons instead.

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

回答by David

You can do it very simple: Just add !in the end of your href:

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

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

The alternative jQuery ways are:

替代的 jQuery 方式是：

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

回答by craignewkirk

Actually, the easiest way to do this is to remove the href attribute from your anchor tag. As of HTML5, anchor tags don't need to include href attributes to be semantic.

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

So

所以

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

instead of

代替

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

This works in IE8+, Chrome, and Firefox. Note that :link css styles won't apply to anchor tags that don't include href attributes.

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

If you need the href attribute and/or IE7 compatibility, then

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

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

is probably the best way to go.

可能是最好的方法。

回答by OptimusCrime

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

e.preventDefault()alone did not work in older versions of IE.

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

回答by zamuka

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

回答by Nuno cruz

If you add a "\" to the "#" it will prevent from going to the top.

如果在“#”后面添加“\”，它会阻止进入顶部。

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

回答by ???? ?????

HTML:

HTML：

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

JavaScript:

JavaScript：

$('body').delegate('#like-post','click',function(e) {
     e.preventDefault();
     .....
});

回答by Cain

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

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

if the selector ex.."body" is there during the initial render then use the any selector .. id ... to target the general to have jQuery (as of 1.8.2) iterate over. the "On handler invoke a method called "bind" which is used for newly added content to the DOM",. Using the "[href^=#] will select any href that are in the section tag but you can replace section with anything or nothing and it applies a cancellation to the click event. This technique is great for dynamically created content to the DOM

如果选择器 ex.."body" 在初始渲染期间存在，则使用 any 选择器 .. id ... 来定位一般让 jQuery（从 1.8.2 开始）迭代。“处理程序调用一个名为“绑定”的方法，该方法用于将新添加的内容添加到 DOM”，。使用 "[href^=#] 将选择 section 标签中的任何 href，但你可以用任何东西替换 section 或什么都不替换，它会对点击事件应用取消。这种技术非常适合动态创建的内容到 DOM

回答by rogal111

Example with nice scrolling to answer content:

滚动以回答内容的示例：

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

I'm used jQuery scrollToplugin.

我使用 jQuery scrollTo插件。