scrollTo/localscroll.js not working at all

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
      <script src="js/jquery.localscroll.js"></script>
      <script src="js/jquery.scrollTo.js"></script>
      <script src="js/script.js"></script>

script.js:

$(document).ready(function() {

    $('#menu').localScroll({
        target:'#content'
    });   

});

html:

  <div id="container">
     <div id="menu">
     <nav>
        <ul>
            <开发者_如何转开发;li><a href="#home">HOME</a></li>
            <li><a href="#gigs">GIGS</a></li>
            <li><a href="#top10">TOP10</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
     </nav>
     </div>

     <div id="content"><!-- content -->
        <div id="home">home</div>
        <div id="gigs">gigs</div>
        <div id="top10">top10</div>
        <div id="contact">contact</div>
     </div><!-- end of content -->

i don't understand what is wrong....help me! thnx

The problem is partially in your HTML formatting, and there might be some CSS errors on your side as well (can't tell from here.)

First of all, it's a bad idea to use an html element like <nav>, (i have no idea what it is, this is the first time i've ever seen it and it might cause problems with jQuery)

Second, your content div must have a fixed size, and overflow:scroll as CSS markup.

To see a working example, check out This JsFiddle i made for you

I remember using this plugin at some point and I think you need to specify a target

$(document).ready(function() {

    $('#menu').localScroll({
        target:'#content'
    });   

});

Keep your menu wrapper as is and change the js conde to:

$(document).ready(function()
    {
        $('#menu').localScroll({duration:800});
    }
);

And I don't think you need the content ID in content wrapper. That might help.

I had exactly the same problem.

Chrome was driving me nuts in why it was not working, but the funny thing was is that I've used this plugin before and it worked in all browsers!!!

So I looked at every single bit of HTML, CSS, JS, to try and figure out what was different.

See below my anchor.

<a class="anchor" name="myanchor"></a>

My CSS on the class 'anchor' was blank. As soon as I added CSS 'position: relative' to the anchor element, Bingo! it worked in Chrome.

Hope this helps someone!

This worked for me: I was including the file twice.

In our header:

<script type="text/javascript" src="/js/lib/jquery.scrollTo-min.js"></script>

And in our footer:

<script type="text/javascript" src="/scripts/jquery.scrollTo-1.4.2-min.js"></script>

Removing the second include solved the problem.

This happened due to merging of a new website design onto our existing one.

I've just wrote a blog post about localscroll at chrome: http://lukaszkups.pl/blog/localscroll-chrome-problem/

You should use:

$("html,body").localScroll({duration:800});

Duration is optional of course, but at least set html/body as a target ;)