ScrollTo horizontal problem- top div contents briefly show in bottom div on nav. click

Question

I am using ScrollTo and LocalScroll on my single page site, which scrolls in all directions. I have four large divs inside a wrapper, two on top and two below those. Each div is a 'page' of the site.

Onload, the page goes to the 'home' div anchor, at the bottom left of the window/page. My issue is that anytime I try to scroll horizontally from one of the bottom divs to another via my floating nav box, it flashes the content from the div above it before scrolling to the correct linked div.

There is no 'flicker' or 'flash' of any content when the scrolling originates from a top div.

Any help is very much appreciated!

Answer 1

It took some time and tons of Googling but I finally figured this out.

Comment from: Freelancer ID [Member] I think i've got the problem..

If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)

To fix this, Please try to use the following: - Put "javascript:;" in the HREF attribute of the A tag. - Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.

This will fix it.

Source: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery