blocks|key|985582|text|这是旧的但是..。以防有人在搜索中发现这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985583|只需使用"#/"而不是"#"，页面就不会跳转。|offset|length|style|CODE|985584|entityMap^0|0|4|4|B|3|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

So this is old but... just in case someone finds this in a search.

Just use <code>"#/"</code> instead of <code>"#"</code> and the page won't jump.

blocks|key|985337|text|你甚至可以这样写它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985338|<a+href="javascript:void(0);"></a>|code-block|syntax|javascript|985339|我不确定这是不是更好的方法，但这是一种方法:)|985340|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

you can even write it just like this:

<pre><code>&lt;a href="javascript:void(0);"&gt;&lt;/a&gt;
</code></pre>

im not sure its a better way but it is a way :)

blocks|key|1199554|text|您可以使用event.preventDefault()来避免这种情况。点击这里阅读更多内容：http://api.jquery.com/event.preventDefault/。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1199555|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/event.preventDefault/^0|5|M|1A|17|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You can use <code>event.preventDefault()</code> to avoid this. Read more here: <a href="http://api.jquery.com/event.preventDefault/" rel="noreferrer">http://api.jquery.com/event.preventDefault/</a>.

blocks|key|985426|text|只要使用<input+type="button"+/>而不是<a>，并使用CSS样式它看起来像一个链接，如果你愿意。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|985427|按钮是专门为单击而制作的，它们不需要任何href属性。|985428|最好的方法是使用onload+action创建按钮，并通过javascript将其附加到您需要的位置，这样在禁用javascript的情况下，它们将根本不会显示，也不会让用户感到困惑。|985429|当你使用href="#"时，你会得到大量指向相同位置的不同链接，当代理不支持JavaScript时，这将不起作用。|985430|entityMap^0|4|N|U|3|0|0|0|4|8|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|M|$]]

Just use <code>&lt;input type="button" /&gt;</code> instead of <code>&lt;a&gt;</code> and use CSS to style it to look like a link if you wish.

Buttons are made specifically for clicking, and they don't need any href attributes.

The best way is to use onload action to create the button and append it where you need via javascript, so with javascript disabled, they will not show at all and do not confuse the user.

When you use <code>href="#"</code> you get tons of different links pointing to the same location, which won't work when the agent does not support JavaScript.

blocks|key|1199774|text|如果你想使用一个锚，你可以使用http://api.jquery.com/event.preventDefault/，就像其他答案建议的那样。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1199775|您还可以使用任何其他元素，如span，并将click事件附加到该元素。|1199776|$("span.clickable").click(function(){
alert('Yeah+I+was+clicked');
});|code-block|syntax|javascript|1199777|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/event.preventDefault/^0|F|17|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

If you want to use a anchor you can use <a href="http://api.jquery.com/event.preventDefault/" rel="noreferrer">http://api.jquery.com/event.preventDefault/</a> like the other answers suggested. 

You can also use any other element like a span and attach the click event to that.

<pre><code>$("span.clickable").click(function(){
alert('Yeah I was clicked');
});
</code></pre>

blocks|key|1200338|text|$('a[href="#"]').click(function(e)+{e.preventDefault();+});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1200339|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('a[href="#"]').click(function(e) {e.preventDefault(); });
</code></pre>

blocks|key|985929|text|您可以使用#0作为href，因为不允许将0作为id，因此页面不会跳转。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|985930|<a+href="#0"+class="someclass">Text</a>|code-block|syntax|javascript|985931|entityMap^0|5|2|K|1|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You can use <code>#0</code> as href, since <code>0</code> isn't allowed as an id, the page won't jump.

<pre><code>&lt;a href="#0" class="someclass"&gt;Text&lt;/a&gt;
</code></pre>

blocks|key|1199906|text|如果元素没有有意义的href值，那么它就不是真正的链接，那么为什么不使用其他元素呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1199907|正如Neothor所建议的那样，跨度也是适当的，如果样式正确，作为一个可以点击的项目，它将是显而易见的。你甚至可以附加一个悬停事件，当用户的鼠标移到elemnt上时，它就会“亮起来”。|1199908|然而，话虽如此，你可能需要重新考虑你的站点的设计，这样它就可以在没有javascript的情况下运行，但当javascript可用时，它会得到增强。|1199909|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

If the element doesn't have a meaningful href value, then it isn't really a link, so why not use some other element instead?

As suggested by Neothor, a span is just as appropriate and, if styled correctly, will be visibly obvious as an item that can be clicked on. You could even attach an hover event, to make the elemnt 'light up' as the user's mouse moves over it.

However, having said this, you may want to rethink the design of your site so that it functions without javascript, but is enhanced by javascript when it is available.

blocks|key|1200163|text|带有按钮“#”的链接几乎总是应该替换为href=元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1200164|<button+class="someclass">Text</button>|code-block|syntax|javascript|1200165|使用带有href="#“的链接也是一个可访问性问题，因为这些链接对屏幕阅读器是可见的，屏幕阅读器将读取"Link+-+Text”，但如果用户单击它，它将不会转到任何地方。|1200166|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Links with href="#" should almost always be replaced with a button element:

<pre><code>&lt;button class="someclass"&gt;Text&lt;/button&gt;
</code></pre>

Using links with href="#" is also an accessibility concern as these links will be visible to screen readers, which will read out "Link - Text" but if the user clicks it won't go anywhere.

blocks|key|986005|text|#/技巧可以工作，但会向浏览器添加一个历史事件。因此，单击back不会像用户希望/期望的那样工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|986006|我采用的方法是$('body').on('click',+'a[href="#"]',+function(e)+{e.preventDefault()+});，因为它适用于已经存在的内容，以及加载后添加到DOM中的任何元素。|986007|具体地说，我需要在.btn-group(Reference)中的引导下拉菜单中执行此操作，因此我做到了：|986008|$('body').on('click',+'.dropdown-menu+li+a[href="#"]',+function(e)+{e.preventDefault()+});|986009|这样它就有针对性了，并且不会影响页面上的任何其他东西。|986010|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/components/#btn-dropdowns^0|0|2|0|7|20|0|9|A|J|B|0|0|0|2I|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|J|3|K|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1A|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

The <code>#/</code> trick works, but adds a history event to the browser. So, clicking back doesn't work as the user may want/expect it to.
<code>$('body').on('click', 'a[href=&quot;#&quot;]', function(e) {e.preventDefault() });</code> is the way I went, as it works for already existing content, and any elements added to the DOM after load.
Specifically, I needed to do this in a bootstrap dropdown-menu inside of a <code>.btn-group</code><a href="http://getbootstrap.com/components/#btn-dropdowns" rel="nofollow noreferrer" title="reference">(Reference)</a>, so I did:
<code>$('body').on('click', '.dropdown-menu li a[href=&quot;#&quot;]', function(e) {e.preventDefault() });</code>
This way it was targeted, and didn't affect anything thing else on the page.

blocks|key|1199971|text|您可以只传递一个不带href属性的锚点标记，并使用jQuery执行所需的操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1199972|<a+class="foo">bar</a>|offset|length|style|CODE|1199973|entityMap^0|0|0|M|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

You could just pass an anchor tag without an href property, and use jQuery to do the required action:

<code>&lt;a class="foo"&gt;bar&lt;/a&gt;</code>

blocks|key|985736|text|我已经使用了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985737|<a+href="javascript://nop/"+class="someClass">Text</a>|code-block|syntax|javascript|985738|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have used:

<pre><code>&lt;a href="javascript://nop/" class="someClass"&gt;Text&lt;/a&gt;
</code></pre>

blocks|key|1200569|text|我一直在用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1200570|<a+href="#?">Some+text</a>|code-block|syntax|javascript|1200571|当试图防止页面跳转时。我不确定这是不是最好的，但它似乎已经运行多年了。|1200572|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I've always used:

<pre><code>&lt;a href="#?"&gt;Some text&lt;/a&gt;
</code></pre>

when trying to prevent the page jump. Not sure if this is the best, but it seems to have been working well for years.

blocks|key|985622|text|您也可以在处理jquery之后返回false。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985623|例如：|985624|$(".clickableAnchor").live(
++++"click",
++++function(){
++++++++//your+code
++++++++return+false;+//<-+prevents+redirect+to+href+address
++++}
);|code-block|syntax|javascript|985625|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can also return false after processing your jquery.

Eg.

<pre><code>$(".clickableAnchor").live(
 "click",
 function(){
 //your code
 return false; //&lt;- prevents redirect to href address
 }
);
</code></pre>

blocks|key|1200086|text|我使用的是这样的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1200087|<a+href="#null"+class="someclass">Text</a>|code-block|syntax|javascript|1200088|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I use something like this:

<pre><code>&lt;a href="#null" class="someclass"&gt;Text&lt;/a&gt;
</code></pre>

blocks|key|1200249|text|为了防止页面跳转，需要在调用e.preventDefault();之后再调用e.stopPropagation();|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1200250|stopPropagation阻止事件在DOM树上向上移动。更多信息请点击此处：https://api.jquery.com/event.stoppropagation/|1200251|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/event.stoppropagation/^0|E|J|12|K|0|0|F|14|19|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

To prevent the page from jumping, you need to call <code>e.stopPropagation();</code> after calling <code>e.preventDefault();</code>:

<code>stopPropagation</code> prevents the event from going up the DOM tree. More info here: <a href="https://api.jquery.com/event.stoppropagation/" rel="nofollow">https://api.jquery.com/event.stoppropagation/</a>

blocks|key|1200321|text|如果您希望迁移到同一页面上的Anchor+Section而不跳转页面，请使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1200322|只使用"#/“而不是"#”，例如|1200323|<a+href="#/home">Home</a>
<a+href="#/about">About</a>
<a+href="#/contact">contact</a>+page+will+not+jump+up+on+click..|code-block|syntax|javascript|1200324|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you want to migrate to an Anchor Section on the same page without page jumping up use:

Just use "#/" instead of "#" 
 e.g 

<pre><code>&lt;a href="#/home"&gt;Home&lt;/a&gt;
&lt;a href="#/about"&gt;About&lt;/a&gt;
&lt;a href="#/contact"&gt;contact&lt;/a&gt; page will not jump up on click..
</code></pre>

blocks|key|985989|text|在#之后添加一些东西会将页面的焦点设置为具有该ID的元素。最简单的解决方案是使用#/，即使您使用的是jQuery。但是，如果您在jQuery中处理事件，则event.preventDefault()是最佳选择。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|985990|entityMap^0|1|1|14|2|25|M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Adding something after <code>#</code> sets the focus of page to the element with that ID. Simplest solution is to use <code>#/</code> even if you are using jQuery. However if you are handling the event in jQuery, <code>event.preventDefault()</code> is the way to go.

blocks|key|986141|text|对我来说，最简单的方法就是这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986142|<a+href="#"+onclick="return+false;">Some+text</a>|offset|length|style|CODE|986143|使用JS的原因是大多数现代网站都依赖它。|986144|entityMap^0|0|0|1D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

The simplest one for me was to do this.
<code>&lt;a href=&quot;#&quot; onclick=&quot;return false;&quot;&gt;Some text&lt;/a&gt;</code>
The reason for using JS is that most modern sites rely on it.

blocks|key|986080|text|如果用户必须多次单击同一输入，则<a+href="#!">Link</a>和<a+href="#/">Link</a>不起作用。对于多个输入，它只需要一次事件点击。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|986081|不过，最好的方法是使用<a+href="#">Link</a>|986082|然后,|986083|event.preventDefault();|code-block|syntax|javascript|986084|entityMap^0|G|L|12|L|0|B|K|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

The <code>&lt;a href="#!"&gt;Link&lt;/a&gt;</code> and <code>&lt;a href="#/"&gt;Link&lt;/a&gt;</code> does not work if one has to click on the same input more than once.. it only takes in 1 event click for each on multiple inputs.

still the best way to go is with <code>&lt;a href="#"&gt;Link&lt;/a&gt;</code>

then,

<pre><code>event.preventDefault();
</code></pre>

I'm currently using <code>&lt;a&gt;</code> tags with jQuery to initiate things like click events, etc. 

Example is <code>&lt;a href="#" class="someclass"&gt;Text&lt;/a&gt;</code>

But I hate how the '#' makes the page jump to the top of the page. What can I do instead?

How to prevent a click on a '#' link from jumping to top of page?

我目前正在使用带有jQuery的<a>标签来启动点击事件等。以<a href="#" class="someclass">Text</a>为例但是我讨厌'#‘让页面跳到页面的顶部。我能做些什么呢？

问如何防止点击“#”链接跳转到页面顶部？
EN

回答 20

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止点击“#”链接跳转到页面顶部？EN

回答 20

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止点击“#”链接跳转到页面顶部？
EN