Open page at top even if there is an #anchor to lower down the page in the URL

Question

I've a query: is it possible to disabled browsers default action on links such as this example?

I am not talking about disabling click event on Anchor tag( PART 123) using event.preventDefault()

What I am trying to do : There is TOC at the beginning of page with name links (#part-) to different part of page. I can easily disable click event on each link using :

$("a.namedLink").click(function(event) {
  event.preventDefault();

  //and do whatever I want to, like animated scroll then moving the dock-able header using jQuery Affix plugin
}); 

But, if someone copies the link or directly opens it by using the URL itself (link), the code above won't work because nothing has been clicked.

I've checked couple of examples, but, they all talk about same page and #click event, like this Stackoverflow thread Scroll to a div using jquery and others:

link1

link2

Please let me know if we can do it and more importantly, if we should do it.

Thanks

Answer 1

You can scroll to an anchor point using:

$(document).scrollTo("a[name='namedLink']");

You can also check the hash location on page load if the user hits the page directly with a hash:

$(function() {
  var hash = window.location.hash.substring(1, window.location.hash.length);
  if(hash != "") {
    $(document).scrollTo("a[name='"+hash+"']");
  }
});

Should you? It's entirely up to you. It would be like re-inventing the wheel just to make it red, even though not everyone likes red.

As pointed out, the very useful scrollTo() method is actually a plugin and not built into jQuery. It can be found here: http://demos.flesler.com/jquery/scrollTo/

Answer 2

You could do something like:

$(function () {
  window.scrollTo(0,0);
});

to bring the user back to the top after the page has loaded. This will potentially mean the page jumps twice, however.