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

Question

I m currently using  lt a gt  tags with jQuery to initiate things like click events  etc    Example is  lt a href     class  someclass  gt Text lt  a gt   But I hate how the     makes the page jump to the top of the page  What can I do instead

User · Accepted Answer

In jQuery  when you handle the click event  return false to stop the link from responding the usual way prevent the default action  which is to visit the href attribute  from taking place  per PoweRoy s comment and Erik s answer       a someclass   click function e           Special stuff to do when this link is clicked            Cancel the default action     e preventDefault

User · Answer

a href        click function e   e preventDefault

User · Answer

There are 4 similar ways to prevent the page from jumping to the top without any JavaScript   Option 1    lt a href   0  gt Link lt  a gt    Option 2    lt a href      gt Link lt  a gt    Option 3    lt a href      gt Link lt  a gt    Option 4  Not recommended     lt a href  javascript void 0    gt Link lt  a gt    But it s better to use event preventDefault   if you are handing the click event in jQuery

User · Answer

The  lt a href      gt Link lt  a gt  and  lt a href      gt Link lt  a gt  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  lt a href     gt Link lt  a gt   then   event preventDefault

User · Answer

To prevent the page from jumping  you need to call e stopPropagation    after calling e preventDefault      stopPropagation prevents the event from going up the DOM tree   More info here  https   api jquery com event stoppropagation

User · Answer

Adding something after   sets the focus of page to the element with that ID  Simplest solution is to use    even if you are using jQuery  However if you are handling the event in jQuery  event preventDefault   is the way to go

User · Answer

The    trick works  but adds a history event to the browser  So  clicking back doesn t work as the user may want expect it to      body   click  a href        function e   e preventDefault       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  btn-group Reference   so I did      body   click   dropdown-menu li a href        function e   e preventDefault        This way it was targeted  and didn t affect anything thing else on the page

User · Answer

I ve always used    lt a href      gt Some text lt  a gt    when trying to prevent the page jump  Not sure if this is the best  but it seems to have been working well for years

User · Answer

Just use     lt a href  javascript    class  someclass  gt Text lt  a gt    JQUERY       someclass   click function e    alert  action here

User · Answer

I use something like this    lt a href   null  class  someclass  gt Text lt  a gt

User · Answer

You could just pass an anchor tag without an href property  and use jQuery to do the required action    lt a class  foo  gt bar lt  a gt

User · Answer

Just use  lt input type  button    gt  instead of  lt a gt  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 href     you get tons of different links pointing to the same location  which won t work when the agent does not support JavaScript

User · Answer

I have used    lt a href  javascript   nop   class  someClass  gt Text lt  a gt

User · Answer

So this is old but    just in case someone finds this in a search   Just use      instead of     and the page won t jump

User · Answer

Solution  1   plain    lt a href      class  someclass  gt Text lt  a gt      Solution  2   needed javascript    lt a href  javascript void 0    class  someclass  gt Text lt  a gt      Solution  3   needed jQuery    lt a href     class  someclass  gt Text lt  a gt   lt script gt     a someclass   click function e        e preventDefault         lt  script gt

User · Answer

You can use  0 as href  since 0 isn t allowed as an id  the page won t jump    lt a href   0  class  someclass  gt Text lt  a gt

User · Answer

Links with href     should almost always be replaced with a button element    lt button class  someclass  gt Text lt  button gt    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

User · Answer

you can even write it just like this    lt a href  javascript void 0    gt  lt  a gt    im not sure its a better way but it is a way

User · Answer

You can use event preventDefault   to avoid this  Read more here  http   api jquery com event preventDefault

User · Answer

If you want to use a anchor you can use http   api jquery com event preventDefault  like the other answers suggested    You can also use any other element like a span and attach the click event to that      span clickable   click function    alert  Yeah I was clicked

User · Answer

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

User · Answer

You can also return false after processing your jquery   Eg       clickableAnchor   live       click       function              your code         return false     lt - prevents redirect to href address

User · Answer

If you want to migrate to an Anchor Section on the same page without page jumping up use   Just use           instead of          e g    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

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

Examples related to javascript

Examples related to jquery

Examples related to html