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

JavaScript

Posted by Stefan Vitasovic
Stefan Vitasovic
13,443 Points

jQuery scroll by element height

So I'm making this collage/gallery page for a website and am looking for an elegant way to scroll by element size and not by pixel height as it is happening now. Tried something with $('ElementClass').height() but did not work as expected :/ Much obliged. 

$("a[href='#up']").click(function() {
  $("html, body").animate({ scrollTop: '-=350px' }, "slow");
  return false;
});

$("a[href='#down']").click(function() {
  $("html, body").animate({ scrollTop: '+=350px' }, "slow");
  return false;
});


$(window).scroll(function() {
    if ($(window).scrollTop() > 10) {
        $(".scroll").fadeIn("slow");
    }
    else {
     $(".scroll").fadeOut("fast");
 }
});

4 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Figure out the top position of the element. On my test page, I'm using a fixed navigation bar that needs to be considered.

// scroll boundary
var fixed_nav_height = 50;      
var scroll_boundary = $jumbotron.position().top - fixed_nav_height;

Keep track of the current scroll position. If the scroll position is less than or equal to the scroll boundary, stop the scroll animation and set scroll position equal to scroll boundary.

// scroll position
var scroll_pos = 0;

$scroll_up.click(function() {
    $body.animate({ scrollTop: "-=" + jumbo_height }, "slow");
    scroll_pos -= jumbo_height;
    if (scroll_pos <= scroll_boundary) {
        scroll_pos = scroll_boundary;
        $body.stop().scrollTop(scroll_boundary);
    }
});

$scroll_down.click(function() {
  $body.animate({ scrollTop: "+=" + jumbo_height }, "slow");
  scroll_pos += jumbo_height;
});

This will not stop the user from scrolling with the mouse - only when clicking the link to scroll up will it stop at the top of the element set as the scroll boundary.

Stefan Vitasovic
Stefan Vitasovic
13,443 Points

Got it working! Thanks man. Thanks a lot.

Just one final question: Any tips on making this thing a bit more graphics-friendly since it is glitching a bit when scrolling? I'm guessing it has to do with the syntax...

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Try looking into CSS transitions or transforms to take advantage of a device's GPU. While I haven't read it, this link to StackOverflow may help you more.

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Stefan,

I just did some testing and got it working - if I understood your question correctly - to scroll by a height of some element rather than an arbitrary fixed height.

You were on the right track with $('ElementClass').height() but in my case, the element also had padding which needed to be accounted for (also margin and border if those are important to consider; in my case, they weren't).

// cache DOM
var $body = $("body");
var $scroll_up = $("a[href='#up']");
var $scroll_down = $("a[href='#down']");
var $jumbotron = $(".jumbotron");

// scroll height
var jumbo_height = $jumbotron.height();
jumbo_height += parseInt($jumbotron.css("padding-top"));
jumbo_height += parseInt($jumbotron.css("padding-bottom"));      

$scroll_up.click(function() {
    $body.animate({ scrollTop: "-=" + jumbo_height }, "slow");        
});

$scroll_down.click(function() {
    $body.animate({ scrollTop: "+=" + jumbo_height }, "slow");
});
Stefan Vitasovic
Stefan Vitasovic
13,443 Points

Right on the money!

Stefan Vitasovic
Stefan Vitasovic
13,443 Points

Just one thing: How can I stop scrolling-up if the scroll went up past an element I wanted to be the top one in the whole scroll section and reset the scroll to the top of that element?

Hope you understand the question. Thank you.

Stefan Vitasovic
Stefan Vitasovic
13,443 Points
Stefan Vitasovic
Stefan Vitasovic
13,443 Points

Just one thing: How can I stop scrolling-up if it the scroll went up past an element I wanted to be the top one in the whole scroll section and reset the scroll to the top of that element?

Hope you understand the question. Thank you.

Stefan Vitasovic
Stefan Vitasovic
13,443 Points
Stefan Vitasovic
Stefan Vitasovic
13,443 Points

Got it working! Thanks man. Thanks a lot.

Just one final question: Any tips on making this thing a bit more graphics-friendly since it is glitching a bit when scrolling? I'm guessing it has to do with the syntax...