Can't get ID anchor smooth scroll to work with jQuery..

I don't know much wordpress yet, but I often use JQuery, you mentioned the fact when you click your anchor it goes directly to the relative anchor, without getting the scrolling effect. The JQuery snippet looks at first glance good. So It's probably the script you use which isn't well "imported".

Have you checked the console ? Are there any errors displayed ?

I get TypeError: $(...).localScroll is not a function

I'm a newb with jQuery am I suppose to link to a library or something?

Edit: that was a different error. Now I am getting no errors in console.

And still not working

this is the website thesloeruin.com and I want the scroll effect to work when user clicks 'About' in the nav bar to scroll down to the About us section.

Are you using jQuery no conflict? You need to use this when using jQuery with WordPress.

This is the code I usually use for scrolling to an ID.

$('a[href^="#"]').on('click',function (e) {
     e.preventDefault();
     var target = this.hash,
     $target = $(target);
     $('html, body').stop().animate({
          'scrollTop': $target.offset().top
     }, 500, 'swing', function () {
          window.location.hash = target;
     });
});

Was hoping I could figure this out but looks like I need to learn jQuery I'm a bit lost. This is the error I get in the console though.

GET http://www.thesloeruin.com/jquery.scrollTo.js [HTTP/1.1 404 Not Found 23ms]

The path to the Jquery.scrollTo.js isn't good.

What directory is your scroll.js file in? Looks like the path is currently wrong. Is it being outputted to your page? Check your source code.

I fixed the path now no errors in console. I think the problem is I don't know where I am suppose to put the anchor id?

Put the ID anchor where you want the link to scroll to when clicked.

<div id="aboutus">
     // About us content goes here.
</div>

No i mean where I am suppose to place it in the js or php function..

I used your code Stephen and placed it here a[href^="#aboutus"]').on ..

Ah ok, sorry. You shouldn't need to alter the javascript code, it should work as is.

Argghh still can't figure this out. I've just copy pasted this at the top of the header.php file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$('a[href^="#"]').on('click',function (e) {
     e.preventDefault();
     var target = this.hash,
     $target = $(target);
     $('html, body').stop().animate({
          'scrollTop': $target.offset().top
     }, 500, 'swing', function () {
          window.location.hash = target;
     });
});
</script>

No console errors and still no animation..

WordPress already ships with jQuery so you shouldn't need the jQuery link. Have you tested this out of WordPress, to see if it functions without WordPress being a factor? That would determine if it is WordPress that is causing the issue or not.