Page Jumping - Can't stop it

Question

I'm making mock ups for a flash app using HTML pages - I'm using HTML pages to demonstrate it inside a browser, plus it looks better pixel for pixel, and I'm using jQuery for rich animations on some pages.

I'm using normal <a> tags for my buttons which navigate through the HTML pages.

But if I have scrolled halfway down the page and click on a button at the bottom of the page - when it goes to the next HTML page it jumps back to the top of the page - this is obviously going to happen.

Is there any javascript or tricks that can prevent all <a> tags from jumping to the top of the page when navigating though my HTML pages. Or even better, if I could give my <a> tags a class so it doesn't interfere with my jQuery animations - because some use <a> tags.

My html pages are like so:

page-1.html
page-2.html
page-3.html
page-4.html
page-5.html

I'm not actually using jQuery or JavaScript to navigate through my pages, so when it jumps to page-2.html from page-1.html - it always jumps to top.

My <a> tags are using full href's <a href="page-2.html" class="stop-jumping" title="Page 2"><img ... /></a>

I'm looking for something to include in the head of every HTML page to stop my page from moving when navigating using <a> tags.

Answer 1

I assume your a tag doesn't have a proper href attribute and you just put "#" in it (which is bad from a semantic and usability point of view).

Your browser is thinking you're clicking on an anchor, try to find it in the DOM, fail and then brings you back to the top of the page.

A way to avoid that is to bind a function on the click event of your a tags and call preventDefault()

$("a").click(function(event) {
  event.preventDefault();
}

See the jQuery doc.

---

Edit due to huge edit on question

You need to use HTML anchor. On each of your html pages, give an id on the element you want your users screen to be aligned on.

<h1 id="the_place">The user screen will be aligned to this element</h1>

And on every link that leads to another page, add #the_place on the end of the href attribute

<a href="/page-2.html#the_place">Go to page 2</a>

That should do it =).

Answer 2

$("a").click(function(e) {
  e.preventDefault();
}

Answer 3

You could use

return false 

at end of the function that handle your navigation or calling

e.preventDefault and e.stopPropagation

that stop the normal behaviour of the event (in your case a click event on an anchor).

Answer 4

Yes when you have a click event return false

 $('a').click(function(){
    return false;
}

This will break the standard a tag event