Disable page scroll when using an anchor target

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?

Thanks for any help you guys can provide!

Am I unclear in my description, or is this genuinely an issue that no one knows how to solve?

you are unclear

best to post a link to the code of post code

http://www.w3.org/Style/Examples/007/target.html

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 cant disable it but have the following workaround




<script language="JavaScript" type="text/javascript">
<!--
function bgenScroll() {
 if (window.pageYOffset!= null){
  st=window.pageYOffset+'';
 }
 if (document.body.scrollWidth!= null){
  if (document.body.scrollTop){
  st=document.body.scrollTop;
  }
  st=document.documentElement.scrollTop;
 }
  setTimeout('window.scroll(0,st)',10);
}



//-->
</script>

</p><div class="example">
 <div class="tabs">
  <div id="tab1">
  <a href="#tab1" onclick="bgenScroll();" >Tab&nbsp;1</a>
   <div>One might well argue, that...</div>
  </div>
  <div id="tab2">
   <a href="#tab2" onclick="bgenScroll();">Tab&nbsp;2</a>

   <div>... 30 lines of CSS is rather a lot, and...</div>
  </div>
  <div id="tab3">
   <a href="#tab3" onclick="bgenScroll();">Tab&nbsp;3</a>
   <div>... that 2 should have been enough, but...</div>
  </div>
  <div id="default2">

   <a href="#default2" onclick="bgenScroll();" >Default</a>
   <div>... it works!</div>
  </div>
 </div>
</div>

</div>
</div>




bit naff but all I can think of at the moment

learnt from your code though - thanks

while I’m here can you help with




<html>

<head>
  <title></title>
<style>
.fred {
 width:200px;height:100px;
 background-color: #404040;
 border: thin solid black;
 margin-right: 2px;
 padding: 0px 2px;
 -moz-border-radius: 5px 20px 40px 60px;
}

</style>
</head>
<div id=trial class='fred' ></div>
<body>

</body>

</html>





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.