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