Question

I’m using jQuery to toggle the visibility of content on a webpage through local anchors and their onclick attributes. It would be nice to prevent the page from scrolling to the anchor in order to to keep parts of the menu, located on top of the content, “always” in sight. jQuery’s event.preventDefault() seemed to do the trick but than I realized that the browser history is disabled, too. Also the anchor won’t be show in the url, which is not favored by me.

Is there a way to only partly disable the default behaviour, like scrolling?

The webpage’s link.

Answer 1

I’d recommend sticking with preventDefault for the scroll suppression and turning to either the native history object’s pushState/replaceState method (where available) and/or balupton’s history.js polyfill for that native functionality.

function anchorClick(e){
    e.preventDefault();
    //do stuff
    history.pushState(null/*state object*/, null/*title*/, document.location + $(e.target).attr('id'));
}

Example: