Offset().top - (100% - 100px) of viewport?

[ReGGaeBOSS]

I have this, a regular animate scrollTop:

jQuery('html, body').animate({ 
   scrollTop: jQuery('#element').offset().top 
}, 1000);

My question is if it is possible to make the offset().top stop at 100px from the bottom of the viewport?

[James_Hibbard]

offset().top-100

Something like that should work.
If not, please provide a fiddle.

[ReGGaeBOSS]

hi, yeah but - 100 only stops the animation 100px from the top, I want it to stop 100px from the bottom of the viewport (think calc(100% - 100px)).

Here is a fiddle: http://jsfiddle.net/d0h4r73t/11/

As you see here the scroll-to element stops 50px from the top, but lets say I want it to stop 100px from the bottom of the viewport instead.

[ralphm]

What about calc(100vh - 100px)? (Untested!)

[ReGGaeBOSS]

But that is CSS

I tried:

$('a').click(function(e){
    e.preventDefault();
    $('body, html').animate({
        scrollTop: $('.scroll-to-this').offset().top - $(window).height() - 100
    }, 1000);
});

but that doesn’t work.

[James_Hibbard]

You were almost there:

$('a').click(function(e){
    e.preventDefault();
    var desiredHeight = $(window).height() - 100;
    $('body, html').animate({
        scrollTop: $('.scroll-to-this').offset().top - desiredHeight
    }, 1000);
});

[ReGGaeBOSS]

Yeah, It worked when i wrapped $(window).height() - 100 in ( ) .

Question: Your solution with the variable, wouldn’t that output the same as my failed solution? Or does using a variable give the same result as wrapping it in ( ) like this: ($(window).height() - 100)

[James_Hibbard]

@ReGGaeBOSS

Or does using a variable give the same result as wrapping it in ( ) like this: ($(window).height() - 100)

Yes.
It’s a question of operator precedence.
Glad you got it solved.