localscroll's hash option, flickers the page when scrolling. How can I make the scrolling smooth

Question

I'm implementing a jquery plugin (localscroll) to smooth scroll to named anchor elements withing a page. localscroll supports an option called 'hash', what it basically does is it appends the named anchor hash into the URL making it easy for the user to bookmark and move using the browser back/forward buttons.

---

HTML

<ul id="navigation" class="main_menu">
    <li><a href="#panel_home">Home</a></li>
    <li><a href="#panel_story">Story</a></li>
    <li><a href="#panel_mantra">Mantra</a></li>
    <li><a href="#panel_showcase">Showcase</a></li>
    <li><a href="#panel_experience">Experience Us</a></li>
</ul>

Javascript (jquery)

$(document).ready(function () {
    $("#navigation").localScroll({
        offset: {left: 0, top: -56},
        hash: true,
        easing: 'easeInOutExpo'
     });
});

The above code runs fine, but whenever a link is clicked the scrolling starts with a flicker (probably because the default behavior of the browser is to jump to the named anchor). This flicker thing is more visible in Firefox than Chrome or Safari and is a big NO-NO. How can I make the transition smooth with the address bar reflecting the current named anchor?? Any help is much appreciated. Thanx!

Answer 1

I found out why my page was flickering upon clicking the links mapped with localscroll. I was including the jquery.js file after the localscroll.js file, which was causing this strange behavior. So, I included all the minified versions of jquery, localscroll, easing and other javascripts that I was using in my scripts in a single .js file and this fixed the problem.