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
williamrossi
6,232 PointsJump to links, smooth scrolling
Hey guys I am trying to create a smooth scrolling effect.
I am fed up of doing this just by sticking the id in the href, it looks a little jerky. what would be a the way to do this with java? I have created a simple nav which I want to smoothly scroll down to the relvevant section, then to scroll back to the top when clicking on the back to top button.
I have googled it and get lots of different results. I am not familar at all with the offset and all that jazz. There must be a simple jquery way to scroll to the id right?
Thanks in advance :0P
<ul> <li><a class="section-one">Section 1</a></li> <li><a class="section-two">Section 2</a></li> <li><a class="section-three">Section 3</a></li> <li><a class="section-four">Section 4</a></li> </ul> <section id="section-one"> I am section one>I am section one>I am section one>I am section one>I am section one>I am section one </section> <section id="section-two"> I am section two I am section twoI am section two </section> <section id="section-three"> I am section three I am section threeI am section threeI am section three</section> <section id="section-four"> I am section four I am section fourI am section four <a> <div class="back-to-top">back to top of the page </a>
3 Answers
Sean Tepper
2,120 PointsHi William-
I just recently added this functionality to one of my sites with some very simple jquery code. Put the following into your document ready section:
// scroll to a div with the ID "scrollToThis" by clicking a link with the class "scrollLink"
$('.scrollLink').click( function() {
$('html, body').animate({
scrollTop: $('#scrollToThis').offset().top
}, 400);
});
// scroll to the top of the page
if ($('.scrollToTop')[0]){
$('.scrollToTop').click(function(){
$('html,body').animate({ scrollTop: 0 }, 400);
});
}
Here's a codepen to show the code in action: http://codepen.io/anon/pen/BpKnx
You could do this for each element, or run it through a loop to find each element and attach the click function that way.
Victor Rodriguez
15,015 PointsCheck out JQuery libraries. They have done most of the work for you. In particular, the .animate() function should be extremely helpful. It controls smooth transitions when there is any changes to elements. Also the JQuery UI should make a huge difference. http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery the joys of reusable code!
Sean Tepper
2,120 PointsI really like this solution as well. You are able to keep your internal link code while using jquery for smooth animated scrolling.
Victor Rodriguez
15,015 PointsGlad to help!
williamrossi
6,232 PointsGave them both a go. thanks guys. smooooth srolling at last.
williamrossi
6,232 Pointswilliamrossi
6,232 PointsThanks sean, that was a little easier to understand as I'm pretty whack with Jquery still. thanks!
Sean Tepper
2,120 PointsSean Tepper
2,120 PointsYou're very welcome. Glad I could help. :)
I also believe that Victor's solution can work for you as well since it uses your internal link code. My solution is pretty flexible and really great if you want to add the clicking functionality to any element, not just links. Use what works best for you!