Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ben Anggoro
Ben Anggoro
36,161 Points

Smooth Scrolling on a WP Theme on Chrome

Hello everyone,

I am trying to use Chris Coyier's smooth scrolling js snippet on a WP Theme that currently i am working on:

CSS Tricks Smooth Scrolling

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

I put the snippet on the theme.js with no-conflict wrapper for WP.

It works fine on Firefox but not on Safari and Chrome. No errors being thrown on console, and nothing happened when anchor link is clicked (it's not even jump to the link anymore, just dead nothing).

The most annoying part of it, the example on CSS tricks works just fine on chrome so I have no idea wth is going on? Why it works on FF? This is one of those small thing on developing the interweb yet so annoying that sometimes makes me wish i could stop and just grow vegetables :D

Thanks in advance, everyone. Any help is desperately appreciated.