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

CSS

George S-T
George S-T
6,624 Points
Posted by George S-T
George S-T
6,624 Points

How to make a scroll transition?

My page: http://web.ehwscevf9q.treehouse-app.com/files/

What I'm struggling to do:

When the user scrolls down a little, I want a nice transition to occur which directly takes them to the next container.

When the down button is pressed, instead of jumping to the next container straight away, Id like a smooth transition to occur to it.

Thanks for all help, I just can't get my head around doing this.

Dylan Dixon
Dylan Dixon
947 Points

Yeah I'm wondering this as well.

I don't want this exact example's solution but I want to know how to do scroll animations.

Joakim Nordlund
Joakim Nordlund
5,610 Points

I think you need for example jQuery to animate that. Maybe something about that here.

Something like this, when you have for example a link with the href #about and a section with id="about" and jQuery linked.

$(document).ready(function () {  

        $('nav ul li a').click(function () {

            var href = $(this).attr('href');

            $('html, body').animate({ scrollTop: $(href).offset().top }, 1000);

            return false;

        });

});
Dylan Dixon
Dylan Dixon
947 Points

Oh alright cool!

Thanks!

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Okay Joakin, does this get talked about in the web development track at all?

Dylan Dixon
Dylan Dixon
947 Points

jQuery isn't on Treehouse yet.

It will be added next week I think.

Joakim Nordlund
Joakim Nordlund
5,610 Points

Not sure. Look at the link I provided earlier, thats jQuery — here, on Threehouse :)

2 Answers

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

I guess this is what you are trying to achieve in the other post too?

You can see this post here Also there are many plugins for this smoothscroll.js is one of them

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

For everyone else trying to do this, head over to: http://cferdinandi.github.io/smooth-scroll/

It provides the script and how to use it! Cheers Adam.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

The link you have above isn't displaying anything for me so I am not entirely sure what it is that you want to do. However, I am fairly certain that you can't do what you want to do with just CSS. CSS has no way of knowing when the page is scrolled or when a key is pushed on the keyboard. You are probably going to need to us some JS/jQuery to accomplish this. What you need is a function that controls the page scroll and then call it in two event listeners; one for user scrolling and one for pressing arrow keys.

For the arrow keys you will need to make a keydown event listener that prevents the default action ( scrolling the page) and checks to see if the key press was 38 or 40 (up and down key codes respectively). If its the up key you tell your scroll function to scroll to the previous page section, and opposite for the down key.

For user scrolling of the webpage the idea is roughly the same: 1.prevent default scroll action 2.Determine whether it needs to go up or down 3. Execute your scroll function.