Scroll To bottom of element on page

Question

I'm looking to achieve the effect of clicking an anchor tag and it scrolling to element on the page.

I already have this with jquery scrollTo. Like so:

$.scrollTo( this.hash, 1500, {
    easing:'easeInOutCubic',
    'axis':'y'
});

However, I need to it align it so that the element sits at the bottom of the viewport when it's finished animating. Each section on the page is a different height so it would need to dynamically get the elements position and height I guess.

I'm having difficulty working out what numbers I need to calculate to achieve this.

EDIT

I have changed it to this now

var section = $(this.hash);

var scrollPos = $(section).offset().top + ( $(window).height() - $(section).height() );

$('html, body').scrollTop( scrollPos );

But this is still wrong, the '#about' section is now halfway up the page on click, rather than aligned at the bottom of the viewport.

Thanks

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Banana, Mar 16 '14 at 18:33
That is what I already have. I need it to scroll so the element is at the bottom of the viewport rather than the top. — Chris Till, Mar 16 '14 at 18:35
@ChrisTill can you give a fiddle for what you have right now? — T J, Mar 16 '14 at 18:47
it doesnt work because you should subtract window height not add it. check my answer. — Banana, Mar 16 '14 at 19:58

kbariotis · Accepted Answer · 2014-03-16T19:18:06.213

7

get height of the element $(element).height()
get viewport's height $(window).height()
get top position of the element $(element).offset().top
scroll page to $(element).offset().top - ( $(window).height() - $(element).height() )

edited Mar 16 '14 at 19:18

answered Mar 16 '14 at 18:53

kbariotis

756
1
13
24

1

document height wont work as the document can be miles long. has to be window height – Banana Mar 16 '14 at 18:55
I've updated my code with this (See question) but it still doent calculate the correct height – Chris Till Mar 16 '14 at 19:11
The correct number to scroll to is 520. your solution gives me 8xx – Chris Till Mar 16 '14 at 19:13
1

sorry, typo. Subtraction is the key. – kbariotis Mar 16 '14 at 19:18

score 1 · Answer 2 · answered Mar 16 '14 at 19:24

1

Try like this:

var section = $(this.hash);
var scrollPos = section.offset().top + section.height() - $(window).height();

DEMO

answered Mar 16 '14 at 19:24

Wilmer

2,451
1
11
8

score 0 · Answer 3 · edited May 23 '17 at 11:45

there is answer Here that shows how to scroll page so that the selected element aligns to the top of window.

as for your request to align it to the bottom, i have corrected the code from the linked post:

all you have to do basically is to subtract the window height, and the element height as follows:

$('html, body').animate({
    scrollTop: $("#wmd-input").offset().top - $("#wmd-input").height() - $(window).height()
}, 2000)

the #wmd-input element from my example is the answer text area from this page, open developer console in your browser, paste the code and see it in work

(or any other question where you have the answer area available)

Scroll To bottom of element on page

3 Answers3