How to set up a #link to later on a page, but aligning the target with the bottom of the screen

Question

I want to click the about section on my new website and when it scrolls down, instead of it sliding the about section up and aligning the top of the "about" section with the top of the screen, I want to align the bottom of the "about" section with the bottom of the screen.

I'm not sure if this has to be done with javascript or if it can be done with HTML. What are your thoughts?

Here is the function used to scroll to the top. ( Here Is A JSFiddle )

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Do I just change it to:

//jQuery for page scrolling (to bottom) feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollBottom: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Answer 1

There is no scrollBottom, so you'll need to calculate the appropriate scrollTop:

$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        var $section = $($anchor.attr('href'));
        var scrollPos = $section.offset().top + $section.outerHeight() - $(window).height();

        $('html, body').stop().animate({
            scrollTop: scrollPos
        }, 1500, 'easeInOutExpo');

        event.preventDefault();
    });
});

http://jsfiddle.net/YjgdS/6/