I’m working on an app right now that uses the CSS psuedo class :target to mimic static drop down menu functionality (ala the “Search”, “Thread Tools”, etc on vBulletin) without the use of JavaScript. The issue I’m running into is the browser “jumping” to the anchor target on longer pages despite it being right next to the targeting link.
How would I go about disabling the page scroll/jump for internal anchor targets on a page, say with an onclick property on the linking anchors?
Take a look at this page in FireFox. Notice the tabs in the second example? Scroll your window so that those tabs are toward the bottom of the viewable area, then click on one. See how the window “jumps” to the location of the tab? This is obviously standard functionality for internal anchors, but I’d like the ability to selectively disable this somehow.
I can change width height etc with
document.getElementById('trial').style.width='100px';
but can find the syntax for border radius
also can IE achieve the same effect
As the W3C article points out, when responding to an activated link for an internal anchor, “Browsers typically try to make sure that the targeted element is visible and if possible at the top of the screen.”
Perhaps an internal anchor isn’t what you should be using? For that matter, JavaScript is better supported than CSS 3, anyway.