Prevent/stop auto anchor link from occurring

Question

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/computer 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!

Answer 1

Sure, you need to make sure to return false.

<a href="#name" onclick="return false">Click me</a>

You can also run any javascript function and just make sure that you return false at the end

<a href="#name" onclick"myFunc()"> Click me </a>

and:

function myFunc() {
 //do something
return false;
}

Answer 2

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

Answer 3

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:

Answer 4

The example page (http://www.landventuresllc.com/en/landventures.html#services) does it by scrolling to

window.location.href.indexOf('#');

toward the end of the $(document).ready() function.

Try (untested)

$(window).scrollTo(window.location.href.indexOf('#'))

Answer 5

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.com/skillshare/discussion/1882/disable-anchor-jump/