0

I had implemented the CSS-Tricks Smooth Scrolling snippet on my homepage and it was working wonderfully UNTIL I decided to rebuild my homepage. Now it's not working at all.

Here's a bit of history on what I did. I'm trying to build a single-page scrolling website. Originally, I created a page in Wordpress and inserted 3 divs called 'about,' 'work,' and 'contact.' I implemented the Smooth Scrolling snippet, and everything was working nicely. However, then I decided to do some more research during which discovered the magic of Wordpress custom post types. I decided to rebuild my homepage with a custom template (page-include.php) that uses WP_query to include 3 different pages. Two of the pages ('about' and 'contact') are actual Wordpress pages, but the third ('work') is just a custom loop pulling my custom post type. Long story short, when I went to Settings > Reading and changed the homepage to direct to the new page, the smooth scrolling stopped working. When you click on the links in the nav bar, the page jumps to the appropriate spot, but it doesn't scroll at all. If I change set the homepage back to the old version, the scrolling still works fine. Any ideas on why it stopped working?

If it helps, here's my site. Also, if you're wondering, my theme is based on Roots.

1
  • Have you compared the HTML source to see if there is something missing. A script, for example. Nov 13, 2012 at 3:16

1 Answer 1

0

There's an error occuring on JavaScript execution, that's why the script quits, and therefore no smooth-scrolling gets applied.

I've seen, that your script in plugins.js walks all the links with a hash (#) at the start of href. Unfortunately you have a link in your nav bar, that is like this: <a href="#anchor3">Anchor 3</a>

Now you don't have a section like <div id="#anchor3"> in your website, that's the reason your script throws an error.

The problem is this line of code in your plugins.js, circa line 30:

var targetOffset = $target.offset().top;

$target is empty, try alert($target.length) or console.log($target.length) to get the proof. Now to fix this, change this line:

if (target) {

to this:

if (target && $target.length) {

Now before calling .offset() your script will check if there are any elements in your jQuery selection. If $target is empty, it won't fire, scripts will continue to work.

4
  • Thanks so much! That worked wonderfully. One more question: how did you know there was an error occurring on the JS execution? I was trying to figure out how to check that, and I didn't know where to look...
    – mcography
    Nov 13, 2012 at 17:16
  • Generally Firefox, Chrome, Safari, and to a minor degree even IE have a built in console, which outputs errors. I'm preferably using Chrome, which has the best features IMHO. Check out this guide Nov 13, 2012 at 17:20
  • One more thing: when I click one of the links, the page scrolls down to the right spot but then jumps back up a bit. I thought I had this figured out earlier (by doing this padding-top: 80px; margin-top: -80px;) but now no matter how I change the margin and padding, it still jumps. I know I can delete this line location.hash = target; and it will work, but I don't want to lose the URL change. Any ideas on how to fix this while retaining the URL change? Sorry to keep asking so many questions.
    – mcography
    Nov 13, 2012 at 17:56
  • Sorry, I don't really know how to fix that. You're right, the hash change is why your page is jumping. After changing, the browser jumps to the position of the <div> with the according id. Unfortunately event.preventDefault() or return false doesn't help. I found this question where someone suggests to use different names on the href than on the ids, like href="#about" and id="section-about". Then add "section-" with JS before moving to the div. Nov 13, 2012 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.