Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

In my wordpress functions.php file I added this script to the top of the file

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'scroll', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . 'scroll.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}
//scroll smooth for jquery

jQuery('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, '#aboutus') ).offset().top
    }, 500);
    return false;
});

Then I used this script called 'scroll'

The id href link #aboutus just instantly goes to the point on the page. I want it to scroll but can't get it to work.

12 Answers

geoffrey
geoffrey
28,724 Points

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.

Stephen O'Connor
Stephen O'Connor
22,291 Points

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]

geoffrey
geoffrey
28,724 Points

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

Stephen O'Connor
Stephen O'Connor
22,291 Points

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?

Stephen O'Connor
Stephen O'Connor
22,291 Points

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 ..

Stephen O'Connor
Stephen O'Connor
22,291 Points

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..

Stephen O'Connor
Stephen O'Connor
22,291 Points

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.