-4

Here is jquery i got from stackoverflow as well.

$('ul.navigation').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    $('body').animate({ scrollTop: $anchor.top });
    return false;
});

Here is my nav

<ul class="navigation">
    <li><a href="#" class="home selected">HOME</a></li>
    <li><a href="#aboutMe" class="aboutMe">ABOUT ME</a></li>
    <li><a href="#services" class="services">SERVICES</a></li>
    <li><a href="#portfolio" class="portfolio">PORTFOLIO</a></li>
    <li><a href="#something" class="something">SOMETHING TO READ</a></li>
    <li><a href="#contactMe" class="contactMe">CONTACT ME</a></li>
</ul>

It jumps on the correct id but it does animate. Animation part is what I'm missing. Thanks in advance!

Kalzem
  • 7,320
  • 6
  • 54
  • 79
ray
  • 95
  • 3
  • 4
  • 11

1 Answers1

1

If I understand correctly, this is what you're looking for:

$(document).ready(function() {
    $('ul.navigation').on('click', 'a', function(e) {       
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
    });
});
  • Yes it jumps to the id but does not animate :(. Same output. – ray Mar 09 '14 at 13:16
  • Can you make a fiddle to recreate your issue? the code above works well for me http://jsfiddle.net/mPz52/1/. What version of jQuery are you using? –  Mar 09 '14 at 13:31
  • Ihave these external scripts https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js http://code.jquery.com/jquery-1.11.0.min.js http://code.jquery.com/jquery-migrate-1.2.1.min.js – ray Mar 09 '14 at 13:38
  • Add `` to the `head` of your HTML doc. Also, wrap the script above with `$(document).ready(function() {...}` I'll update my answer to reflect this –  Mar 09 '14 at 13:41
  • Hi, No good. Ive tried uploading sample file in my server. Here is the linnk --> http://idesign.x10.mx/sample.html can you please check the source code if I missed something. Thanks. Sorry for the trouble. – ray Mar 09 '14 at 14:14
  • Yes, it isn't waiting for the DOM & jQuery to load. you need to wrap it with `$(document).ready(function() {...});` as mentioned above; look at the answer again. –  Mar 09 '14 at 14:19
  • Oh Im so sorry. Stupid me. I think Im tired. I got it now. Thanks for the patience. – ray Mar 09 '14 at 14:21