Jquery-hash navigation with jquery-bbq makes page jump

Question

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

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

http://www.tinytoepress.com/

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

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

However, I scroll below the header, which is undesirable. I would like to stay upstairs.

If I scroll up and press "O", I will go to the "About" page, but again scroll down the title. However, if I now scroll up and click “Save” again, I go to the “Shop” without scrolling down, which is desirable.

I use the simple .show() and .hide() methods to control the visibility of div that are set with navigation clicks.

Any ideas on how to prevent a page jump?

Answer 1

The default behavior of the browser when the hash address is changed is to go to the identifier representing the hash. For example: http://example.com/some-page#store will search on the page for an element with id store ( <div id="store">...</div> ). If it is found, the page will move there.

Instead of setting the id attribute, I suggest you set the user attribute data-attr .

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

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

The code will look like this:

 $("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, your problem cannot be replicated (OS X 10.9 works with Google Chrome 31.0.1650.63). A possible explanation for your weird leap: sometimes the varying length of the content also plays a role when loading and pasting new content ...

Answer 3

I believe this could be due to the way this code adds and removes an iframe each time nav is clicked. I found that if one allows the iframe to fully load the page jump, this does not happen. In my chrome tools, if I remove the iframe, the jumps stop together. Maybe I'm wrong, but if you just show and hide the contents of the page when you click on the navigation, there should be no need to store the iframe in a JQuery object and then put it back in the same div container. When the iframe returns all the calls inside the iframe to get the js resources again. These calls are interrupted when the user clicks another nav element. Look at the "Network" tab of the chrome tools, and after clicking on all the navigators you will see that the resource extraction has been canceled, and the other - 206 partial contents in the status column. My suggestion is to load the Iframe once, and then hide the content when necessary. Hope this was helpful.

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