jQuery hash-based nav with jquery-bbq makes page jump around

Question

I have a site at www.tinytoepress.com that uses #hash anchor tag based navigation, using jQuery and the jquery-bbq plugin. It works great, except that sometimes it causes the page to jump down below the header as if it were going to an actual <a name...> tag. But there are no such tags.

For example, with Chrome on OS X if I visit the homepage:

http://www.tinytoepress.com/

and then click the "Store" link in the upper left, I go to:

http://www.tinytoepress.com/#store

However, I am scrolled down below the header, which is not desired. I would like to remain right at the top.

If I scroll up and click "About", I go the About page but again I'm scrolled down past the header. However, if I now scroll up to the top and click on "Store" again, I go to Store without scrolling down, which is desired.

I am using simple .show() and .hide() methods to controlling the visibility of the divs which are set from the nav clicks.

Any ideas how to prevent jumping around in the page?

Answer 1

The default browser behaviour when the hash address is changed is to jump to the id that represents the hash. For example: http://example.com/some-page#store will search on the page the element with id store (<div id="store">...</div>). If this is found, the page will jump there.

Instead of setting the id attribute I suggest you to set a custom data-attr attribute.

<div id="store">...</div> will become <div data-page="store">...</div> and in the jQuery side you will replace $(location.hash).show() with:

$("[data-page='" + location.hash.substring(1) + "']").show()

The code will look like below:

$("a").on("click", function () {

    // get the clicked link
    var $clickedLink = $(this);

    // get the url
    var url = $clickedLink.attr("href");

    // we search the hashes
    if (url[0]  !== "#") { return; }

    // change the location using js
    location.hash= url;

    // hide all pages
    $("[data-page]").hide();

    // show the current page
    $("[data-page='" + url.substring(1) + "']").show();

    // prevent the default browser behaviour (jumping)
    return false;
});

JSFIDDLE

Answer 2

Sorry, can't replicate your issue (running OS X 10.9 with Google Chrome 31.0.1650.63). A possible explanation for your weird jumping: Sometimes the changing content length also plays a role, when loading and inserting new content...

Answer 3

I believe it may be related to how this code is adding and removing the iframe every time the nav is clicked. I found that if one allows the iframe to completely load the page jump doesn't happen. In my chrome tools if I delete the iframe the jumping stops all together. I may be wrong here but if you're just showing and hiding page content when the nav is clicked, there shouldn't be a need to store the iframe in a Jquery object and then put it back in the same div container. When the iframe is put back all the calls inside the Iframe to get js resources happen again. These calls get interrupted when a user clicks a different nav element. Look in the network tab of chrome tools and you will see after clicking on all the navs that the retrieval of a resource is canceled and another has a 206 partial content in the status column. My suggestion is load the Iframe once and then hide the content when needed. I hope this was helpful good luck.

 b = $("#movieCtn").html(), console.log("html: ", b), $("#movieCtn").html(""),    console.log(b,$("#movieCtn").html()), $("#movieCtn").html(b))