Avoid Window Jump to Top When Clicking #-Links

javascript anchor avoid scroll to top on click

The onclick causes the page to resubmit, therefore scrolling to the top.

You need the onclick event to return a false in order to avoid the postback.

This can be done by changing your function to return a false:

somefunction = function () {alert('foo'); return false;}

Or to change the link and onClick event to do so:

<a href="javascript:void(0)" onclick="somefunction(); return false;">anchor</a>

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

The problem is this rule:

#ck-button label input {
  position:absolute;
  top:-20px;
}

When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even outside the viewport – so Firefox tries to scroll there.

You can solve it like this by adding:

#ck-button label {
  display: block;
  position: relative;
  overflow: hidden;
}

Demo

Try before buy

Alternative

Heisenberg points out a problem in his answer which can occur when using extreme values. Unfortunately the proposed idea has the same quirk as the one shown above.

So an alternative solution is simply to hide the input. The functionality is not affected.

CSS

#ck-button label input {
  display: none;
}

Demo

Try before buy

How do I prevent scrolling to the top of a page when popping up a jQuery UI Dialog?

Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.

For example,

$('a.closeButton').click( function() {
     $('#dialog').dialog('open');
     return false;
});

<a class='closeButton'>Close</a>

How can I prevent my anchors jumping my screen around so much?

Its because your using a hash value in your anchors. These cause it to jump to a div with the id specified by the hash.

To sort this you can use jQuery to stop the jumping by using .preventDefault();

You would use this by giving every anchor that jumps a class of prevent and then using jQuery to stop the jumping. Of course, you can change this selector dependant upon your html structure.

$(".prevent").click(function(e) { //Note the e for event
  e.preventDefault();
});

Edit without jQuery

After cursing not having jQuery to work with I have attempted to put together a pure js solution. You will need to check this to make sure it works on your page.

Here is the jsfiddle example.

What I have done is found all anchors on the page and then added return false into their onclick attribute. If this was to go on your live site you will need to further select the anchors, see this example and explanation:

I have also added a class to anchors you do not want to jump. To use this you will need to add a class of "menuControl" to any anchor you want to stop jumping.

Below is my JavaScript incase the jsfiddle link is broken. Just to mention but you will need to control the navigation of these tabs using JavaScript now, as using return false will stop the navigation.

var anchors = document.getElementsByTagName("a");

for(var i = 0; i < anchors.length; i++) {
    if ( anchors[i].className == "menuControl" ) {
        anchors[i].setAttribute("onclick", "return false");
    }
} ​

How to prevent page jumps when checkbox's state changes?

Check this. Use visibility, the element will still in document.

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

---

Related Topics