How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
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.
How to prevent a click on a '#' link from jumping to top of page?
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();
});
How can I avoid page scrolling up on clicking a simple link (#)
Try the following one:
<a href="#!"> Click Me </a>
Unnecessary scrolling to the top of the page when clicking # link
On click of your button you can prevent the default action using preventDefault():
$('a[href="#"]').on('click', function(event) { event.preventDefault(); console.log('default action prevented'); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href='#'>Button</a>Stop page scrolling to the top after the user clicks a read more link
Easiest way is to prevent the default action:
link.click(function(e) {
e.preventDefault();
});
Another way is to return to the scrolled position:
var scrollTop = document.body.scrollTop;
link.click(function(e) {
document.body.scrollTop = scrollTop;
});
Anchor element onClick makes page jump to top of page
Firstly mention the element correctly in the title. Its a a not button.
Next: The # in your a tag will by default take you to the top of the page when you click on it.
Use a javascript:void() in the href attribute to overcome this.
Like <a href='javascript:void();'>something</a>
Example snippet
<div>
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>
<a href='javascript:void();'>this</a></div>href=# is forcing the page to reposition itself to the top - how can I stop this?
Usually when a link has href="#", it's because it's supposed to do something other than navigating (the exception being "To the top" links seen on some long pages...). The "other thing" they're doing is usually handled via JavaScript, and to make sure that they don't continue to their default handler (i.e. navigate) the JS handler should return false.
If you make sure that all your click handlers return false, you won't have this problem anymore.
If you're using jQuery to hook up your events, you could also call .preventDefault() and .stopPropagation() on the first argument to the click handler function. This will do it on it's own in most browsers, but you should still return false for compatibility.
$('.someLink').click(function(ev) {
// do your thing
// Prevent the click from being handled.
ev.preventDefault();
// Prevent the event from propagating through the DOM tree (bubbling)
ev.stopPropagation();
// Return false, for compatibility reasons
return false;
});
Note: If there are click handlers in some library you're using that doesn't return false, you can always wrap it in a handler function of your own that does. But I'd consider abandoning that library...
Related Topics
After Submitting a Post Form Open a New Window Showing the Result
Get Page Generated With JavaScript in Python
How to Include Multiple Js Files Using Jquery $.Getscript() Method
Best Practice: Access Form Elements by HTML Id or Name Attribute
Calling a JavaScript Function in Another Js File
Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts
Edit, Save, Self-Modifying HTML Document; Format Generated Html, JavaScript
How to Get the Element Clicked (For the Whole Document)
When Is Nodelist Live and When Is It Static
Refresh a Page Using JavaScript or Html
Getting the Parent Div of Element
How to Style "Input File" With Css3/JavaScript
How to Remove an HTML Element Using JavaScript