Is there a way to use Javascript to disable the browser from jumping to an anchor when a page loads? For instance, if I link to a page with the URL:
www.example.com/example.html#example
with an anchor named "example" half-way down the page, is there a way to have the page load at the top, rather than at that anchor? I don't want to use something like window.scrollTo or anything "after the fact," but rather I want to catch the functionality and disable it right away so that the page loads immediately at the top. I also want to keep the URL as is, with the anchor listed after the hash.
I don't know how to do this, but I wonder why you'd want to… That seems like something that would infuriate me as a user. If I expect to see #example, I'm going to think your website is broken if I don't get it.
The only thing I could imagine doing would be to absolutely position the element at the top of the page until the document loads. Not sure how to do that unobtrusively though.. Perhaps tack on a 'js' class to the HTML tag, position all elements to the top using 'html.js' as part of your selector, then remove that class immediately. Not sure what the browsers will do, to be honest
The reason I'm trying to do this is I am using DOMTabs, where I display a tab's DIV equivalent when the tab is clicked on (and the DIV is hidden otherwise). I also want to have this functionality when a user visits the page with the anchor link of the DIV in the URL (the www.example.com/example.html#example above). But for some reason, when I load the page with this URL, my entire layout scrolls up to display the location of the anchor at the top of the window. I want to disable this behavior so that when one visits the URL the appropriate DIV is displayed and nothing is scrolled. As a user, you would see the content you expected.
Makes sense. I think someone here already did something similar. Have you tried searching for it? You'll have to inspect location.href or location.hash? to get at the fragment, then display the matching DIV. If the browser then scrolls to it, it probably should.
I agree with pettyrider, do a window.load and getelementbyid and then give it the styles of position:relative, but in your css give it position absolute and top 0px;. that should do the trick.
can you provide a sample page of what you are attempting? i did something similar with a FAQs section on a commercial project (with jQuery, but you could also use plain old DOM).
you could always use an htaccess rule to rewrite the URL from www.example.com/example.html#example to something like www.example.com/example.html?example which would have the effect your looking for without having to resort to javascript
See this is what happens when you don't think about your answer before you post it..
scrap what i said, it's not going to work (well, if you redirect to a cgi script i suppose you could) the server never see's the named anchor, it's held by the User-Agent.
It'd be much easier if you just don't use anchors. :p