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

Agustin Vargas
Agustin Vargas
10,896 Points

Smooth 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
Steven Parker
220,415 Points

Wow. 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! :+1: And that "mistyping" animation is funny!

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 :cool: stuff!

Agustin Vargas
Agustin Vargas
10,896 Points

I 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
Steven Parker
220,415 Points

I saw the snapshot, and added to my answer above :arrow_up:

Agustin Vargas
Agustin Vargas
10,896 Points

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

Agustin Vargas
Agustin Vargas
10,896 Points

Code might not be super organized but I'm sorta new to this. Lol, don't judge too harshly.

https://w.trhou.se/7fi96vjorg

Agustin Vargas
Agustin Vargas
10,896 Points

Thanks! 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
Steven Parker
220,415 Points

Everything seemed to work for me. What's the sequence of steps you do to see the problem?

Agustin Vargas
Agustin Vargas
10,896 Points

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