How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript

Question

When I have a link that is wired-up with a jQuery or JavaScript event such as    lt a href     gt My Link lt  a gt    How do I prevent the page from scrolling to the top   When I remove the href attribute from the anchor the page doesn t scroll to the top but the link doesn t appear to be click-able

User · Answer

You can simply write like this also -   lt a href      onclick  function    gt Delete User lt  a gt

User · Answer

If you can simply change the href value  you should use     lt a href  javascript void 0    gt Link Title lt  a gt    Another neat solution I just came up with is to use jQuery to stop the click action from occurring and causing the page to scroll  but only for href     links    lt script type  text javascript  gt         Stop page jumping when links are pressed           a href        live  click   function e             return false     prevent default click action from happening           e preventDefault       same thing as above          lt  script gt

User · Answer

Also  you can use event preventDefault inside onclick attribute     lt a href     onclick  event preventDefault    doSmth     gt doSmth lt  a gt    No need to write exstra click event

User · Answer

Create a page which contains two links- one at the top and one at the bottom  On clicking the top link  the page has to scroll down to the bottom of the page where bottom link is present  On clicking the bottom link  the page has to scroll up to the top of the page

User · Answer

lt a onclick  yourfunction    gt    this will work fine   no need to add href

User · Answer

Try this    lt a href     onclick  return false   gt My Link lt  a gt

User · Answer

You should change the       lt a href     gt My Link lt  a gt    to   lt a href  javascript    gt My Link lt  a gt    This way when the link is clicked the page won t scroll to top  This is cleaner than using href     and then preventing the default event from running   I have good reasons for this on the first answer to this question  like the return false  will not execute if the called function throws an error  or you may add the return false  to a doSomething   function and then forget to use return doSomething

User · Answer

Returning false from the code you re calling will work and in a number of circumstances is the preferred method but you can also so this    lt a href  javascript    gt Link Title lt  a gt    When it comes to SEO it really depends on what your link is going to be used for   If you are going to actually use it to link to some other content then I would agree ideally you would want something meaningful here but if you are using the link for functionality purposes maybe like Stack Overflow does for the post toolbar  bold  italic  hyperlink  etc  then it probably doesn t matter

User · Answer

An easy approach is to leverage this code    lt a href  javascript void 0    gt Link Title lt  a gt    This approach doesn t force a page refresh  so the scrollbar stays in place   Also  it allows you to programmatically change the onclick event and handle client side event binding using jQuery   For these reasons  the above solution is better than    lt a href  javascript myClickHandler     gt Link Title lt  a gt   lt a href     onclick  myClickHandler    return false   gt Link Title lt  a gt    where the last solution will avoid the scroll-jump issue if and only if the myClickHandler method doesn t fail

User · Answer

You can set your href to    instead of   For example   lt a href  quot    quot  gt Link lt  a gt   will not do any scrolling when clicked  Beware  This will still add an entry to the browser s history when clicked  meaning that after clicking your link  the user s back button will not take them to the page they were previously on  For this reason  it s probably better to use the  preventDefault   approach  or to use both in combination  Here is a Fiddle illustrating this  just scrunch your browser down until your get a scrollbar   http   jsfiddle net 9dEG7   For the spec nerds - why this works  This behaviour is specified in the HTML5 spec under the Navigating to a fragment identifier section  The reason that a link with a href of  quot   quot  causes the document to scroll to the top is that this behaviour is explicitly specified as the way to handle an empty fragment identifier   2  If fragid is the empty string  then the indicated part of the document is the top of the document  Using a href of  quot    quot  instead works simply because it avoids this rule  There s nothing magic about the exclamation mark - it just makes a convenient fragment identifier because it s noticeably different to a typical fragid and unlikely to ever match the id or name of an element on your page  Indeed  we could put almost anything after the hash  the only fragids that won t suffice are the empty string  the word  top   or strings that match name or id attributes of elements on the page  More exactly  we just need a fragment identifier that will cause us to fall through to step 8 in the following algorithm for determining the indicated part of the document from the fragid    Apply the URL parser algorithm to the URL  and let fragid be the fragment component of the resulting parsed URL   If fragid is the empty string  then the indicated part of the document is the top of the document  stop the algorithm here   Let fragid bytes be the result of percent-decoding fragid   Let decoded fragid be the result of applying the UTF-8 decoder algorithm to fragid bytes  If the UTF-8 decoder emits a decoder error  abort the decoder and instead jump to the step labeled no decoded fragid   If there is an element in the DOM that has an ID exactly equal to decoded fragid  then the first such element in tree order is the indicated part of the document  stop the algorithm here   No decoded fragid  If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid  not decoded fragid   then the first such element in tree order is the indicated part of the document  stop the algorithm here   If fragid is an ASCII case-insensitive match for the string top  then the indicated part of the document is the top of the document  stop the algorithm here   Otherwise  there is no indicated part of the document     As long as we hit step 8 and there is no indicated part of the document  the following rule comes into play   If there is no indicated part     then the user agent must do nothing   which is why the browser doesn t scroll

User · Answer

You might want to check your CSS  In the example here  https   css-tricks com the-checkbox-hack  there s position  absolute  top  -9999px   This is particularly goofy on Chrome  as onclick  whatever  still jumps to the absolute position of the clicked element   Removing position  absolute  top  -9999px   for display  none  might help

User · Answer

For Bootstrap 3 for collapse  if you don t specify data-target on the anchor and rely on href to determine the target  the event will be prevented  If you use data-target you ll need to prevent the event yourself    lt button type  button  class  btn btn-default  data-toggle  collapse  data-target   demo  gt Collapse This lt  button gt    lt div id  demo  class  collapse  gt    lt p gt Lorem ipsum dolor sit amet lt  p gt   lt  div gt

User · Answer

Link to something more sensible than the top of the page in the first place  Then cancel the default event    See rule 2 of pragmatic progressive enhancement

User · Answer

When calling the function  follow it by return false example    lt input  type  submit  value  Add  onclick  addNewPayment   return false   gt

User · Answer

You need to prevent the default action for the click event  i e  navigating to the link target  from occurring   There are two ways to do this   Option 1  event preventDefault    Call the  preventDefault   method of the event object passed to your handler  If you re using jQuery to bind your handlers  that event will be an instance of jQuery Event and it will be the jQuery version of  preventDefault    If you re using addEventListener to bind your handlers  it will be an Event and the raw DOM version of  preventDefault    Either way will do what you need   Examples       ma link   click function  e         e preventDefault        doSomething         document getElementById   ma link   addEventListener  click   function  e        e preventDefault        doSomething         Option 2  return false   In jQuery      Returning false from an event handler will automatically call event stopPropagation   and event preventDefault     So  with jQuery  you can alternatively use this approach to prevent the default link behaviour       ma link   click function e         doSomething         return false        If you re using raw DOM events  this will also work on modern browsers  since the HTML 5 spec dictates this behaviour  However  older versions of the spec did not  so if you need maximum compatibility with older browsers  you should call  preventDefault   explicitly  See event preventDefault   vs  return false  no jQuery  for the spec detail

[javascript] How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

Examples related to javascript

Examples related to html