I need to prevent the automatic scroll-to behavior in the browser when using link.html#idX and <div id="idX"/>.

The problem I am trying to solve is where I'm trying to do a custom scroll-to functionality on page load by detecting the anchor in the url, but so far have not been able to prevent the automatic scrolling functionality (specifically in Firefox).

Any ideas? I have tried preventDefault() on the $(window).load() handler, which did not seem to work.

Let me reiterate this is for links that are not clicked within the page that scrolls; it is for links that scroll on page load. Think of clicking on a link from another website with an #anchor in the link. What prevents that autoscroll to the id?

Everyone understand I'm not looking for a workaround; I need to know if (and how) it's possible to prevent autoscrolling to #anchors on page load.

NOTE

This isn't really an answer to the question, just a simple race-condition-style kluge.

Use jQuery's scrollTo plugin to scroll back to the top of the page, then reanimate the scroll using something custom. If the browser/puter is quick enough, there's no "flash" on the page.

I feel dirty just suggesting this...

$(document).ready(function(){

    // fix the url#id scrollto "effect" (that can't be
    // aborted apparently in FF), by scrolling back
    // to the top of the page.
    $.scrollTo('body',0);

    otherAnimateStuffHappensNow();

});

Credit goes to wombleton for pointing it out. Thanks!

I need to prevent the automatic scroll-to behavior in the browser when using link.html#idX and <div id="idX"/>.

The problem I am trying to solve is where I'm trying to do a custom scroll-to functionality on page load by detecting the anchor in the url, but so far have not been able to prevent the automatic scrolling functionality (specifically in Firefox).

Any ideas? I have tried preventDefault() on the $(window).load() handler, which did not seem to work.

Let me reiterate this is for links that are not clicked within the page that scrolls; it is for links that scroll on page load. Think of clicking on a link from another website with an #anchor in the link. What prevents that autoscroll to the id?

Everyone understand I'm not looking for a workaround; I need to know if (and how) it's possible to prevent autoscrolling to #anchors on page load.

NOTE

This isn't really an answer to the question, just a simple race-condition-style kluge.

Use jQuery's scrollTo plugin to scroll back to the top of the page, then reanimate the scroll using something custom. If the browser/puter is quick enough, there's no "flash" on the page.

I feel dirty just suggesting this...

$(document).ready(function(){

    // fix the url#id scrollto "effect" (that can't be
    // aborted apparently in FF), by scrolling back
    // to the top of the page.
    $.scrollTo('body',0);

    otherAnimateStuffHappensNow();

});

Credit goes to wombleton for pointing it out. Thanks!

• javascript
• jquery

• I've looked into this before too, and was unable to find an answer. May I suggest downloading a jQuery plugin that does this and dissecting it's code? I'm sure I've seen one that does what you are describing. – alex Commented Apr 1, 2009 at 0:23
• Any suggestions on one that does this? I've been looking at the scrollTo jQuery plugin and don't see how it's hooking this particular issue - mainly because I don't think it actually does. Do you know of any specific plugins that do this? – Jared Farrish Commented Apr 1, 2009 at 0:36
• I actually think it was on a website designer's portfolio page, but can't remember off the top of my head sorry. I will bookmark this and return if I find it though, but don't count on it, sorry. – alex Commented Apr 1, 2009 at 0:47
• Here are two using scrollTo, the first works right (but uses both axis), the second is not animating but going to straight to the id (unwanted), and there isn't a whole lot of inline code difference. landventuresllc./en/landventures.html balagency./en/bal.html#buzz – Jared Farrish Commented Apr 1, 2009 at 0:51
• Whoops, sorry, the first link that works is here: landventuresllc./en/landventures.html#services – Jared Farrish Commented Apr 1, 2009 at 0:52

4 Answers 4

This seems the only option I can see with ids:

$(document).ready(function() {
  $.scrollTo('0px');
});

It doesn't automatically scroll to classes.

So if you identify your divs with unique classes you will lose a bit of speed with looking up elements but gain the behaviour you're after.

(Thanks, by the way, for pointing out the scroll-to-id feature! Never knew it existed.)

EDIT:

I know this is an old thread but i found something without the need to scroll. Run this first before any other scripts. It puts an anchor before the first element on the page that prevents the scroll because it is on top of the page.

function getAnchor(sUrl)
{
  if( typeof sUrl == 'string' )
  {
   var i = sUrl.indexOf( '#' );
   if( i >= 0 )
    { return sUrl.substr( i+1 ).replace(/ /g, ''); }
  }
  return '';
};

var s = getAnchor(window.location.href);
if( s.length > 0 )
 { $('<a name="'+s+'"/>').insertBefore($('body').first()); }

Cheers! Erwin Haantjes

1. Scroll first to top (fast, no effects pls), and then call your scroll function. (I know its not so pretty)
2. or just use a prefix

This worked well for me:

1- put this on your css file

a[name] { position: absolute; top: 0px }

2- put this on your document.ready bind right before you start animating (if you're animating at all)

$("a[name]").css("position","relative");

Might need tweaking depending on your stylesheet/code but you get the idea.

Credit to: http://cssbeauty./skillshare/discussion/1882/disable-anchor-jump/