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
Agustin Vargas
10,896 PointsSmooth Scroll
I'm having a problem. This code snippet works perfectly fine
$( "a[href*='#']" ).on( "click", function( event ) {
event.preventDefault();
var href = event.target.href;
href = href.slice( href.indexOf( "#" ), href.length );
$( "body" ).animate( {
scrollTop: $( href ).get( 0 ).offsetTop
}, 1000 );
} );
for smooth scrolling but I have images fading in on scroll and for some reason the images fading in on previous divs stops the scroll animation so it ends up stopping in my first div, instead of the desired div.
Anyone know why? or how I could remedy it?
4 Answers
Steven Parker
229,744 PointsWow. I thought you could only .animate CSS properties. Did you find this in the JQuery API docs?
But I'll take a guess that if your images display during the scrolling, but were not visible (display: none) during the animation calculation, that might throw off the ending position.
Could you make a snapshot of your workspace and post the link to it here?
Looking good already! 
The only scrolling issue I saw was caused by the href on line 61 of index.html being set to #portfolio instead of #portfolio1. Was that it? Or are you having other issues?
Also, I found a stray closing </div> tag on line 84.
Let me know if that helps and/or resolves the issue. And carry on with the 
Agustin Vargas
10,896 PointsCode might not be super organized but I'm sorta new to this. Lol, don't judge too harshly.
Agustin Vargas
10,896 PointsThanks! I fixed the errors, thanks for pointing them out. Unfortunately that didn't fix the issue, but I sure those things could have caused problems later on.
I have a feeling the fadeTo animations are interrupting the scroll animation. I'll keep experimenting with the code. Thanks again.
Steven Parker
229,744 PointsEverything seemed to work for me. What's the sequence of steps you do to see the problem?
Agustin Vargas
10,896 PointsPress the three bar menu icon and click portfolio. Don't scroll down, just go straight to the slide in nav. When I click portfolio it stops the scrolling animation about at the midway point of the about section. When all the images have faded in it works perfectly. Which is why I think the fadeTo animation is causing the problem.
Agustin Vargas
10,896 PointsAgustin Vargas
10,896 PointsI think mostly anything that moves can be animated. I actually found it just googling a good solution for smooth scrolling. My display isn't set to none since that messes with my divs and their height so I set their opacity to 0 with fadeTo, then on scroll if the div is in the viewport fadeTo 1. I'm actually working in brackets. It's a personal project, updating my portfolio with some JS and Jquery.
Steven Parker
229,744 PointsSteven Parker
229,744 PointsI saw the snapshot, and added to my answer above
Agustin Vargas
10,896 PointsAgustin Vargas
10,896 PointsYou were right. At the beginning of my project I was playing around with ways to hide the pictures, display: none, hide(), fadeTo etc. I had gotten rid of the display: nones in the my css, or so I thought lol. I missed one, the ones for the pictures in the about section and that was throwing off the scroll. I just needed some sleep, got up this morning and found it straight away. All fixed now. Thanks again.