Grow your CSS skills. Land your dream job.

Smooth scroll div alignment on single page site.

  • # October 23, 2012 at 11:19 am

    I’m building out a site that is essentailly one page, broken up into sections, and navigable through jquery smooth scrolling.

    http://chiaroscuro.telegraphbranding.com/

    Each section’s div is dynamically generated based on the size of the browser. My issue is that I’m having problems calculating the position of the sections in order to align them to the top of the page when a link is clicked. I’ve been trying to use jQuery offset() and position() but I haven’t had any luck getting all three sections to work. The first, funding areas, works great, but I cant get the other two, about us and projects, to align at the top of the browser like funding does.

    Here’s my the jquery that matters:
    `
    $(document).ready(function () {
    var slowScrollFunding = $(‘#funding-areas’).offset().top;
    var slowScrollAbout = $(‘#about-us’).offset().top;
    var slowScrollProjects = $(‘#our-projects’).offset().top;
    panelOpen = true;
    `
    $(‘#anchor-aboutus’).click(function(event) {
    event.preventDefault();
    if(panelOpen == true) {
    $(‘#slide-panel-content’).stop(true, true).animate({height: ‘0px’}, 600, function() {
    $(‘html, body, #aboutus-wrap’).animate({scrollTop:slowScrollAbout}, 1000);
    panelOpen = false;
    });
    `
    Thanks so much.

    # October 28, 2012 at 10:52 am

    Hey James! Your problem is very complicated and it would be a perfect opportunity to ask Mr. Oakman to help you.

    # October 28, 2012 at 12:23 pm

    is your code cutted, or indeed the way they are?

    $(document).ready(function() {
    var slowScrollFunding = $('#funding-areas').offset().top;
    var slowScrollAbout = $('#about-us').offset().top;
    var slowScrollProjects = $('#our-projects').offset().top;
    panelOpen = true;
    $('#anchor-aboutus').click(function(event) {
    event.preventDefault();
    if (panelOpen == true) {
    $('#slide-panel-content').stop(true, true).animate({
    height: '0px'
    }, 600, function() {
    $('html, body').stop().animate({
    scrollTop: slowScrollAbout
    }, 1000);
    panelOpen = false;
    });
    }
    });
    });
    # October 29, 2012 at 5:16 am

    I think the problem might be that you’re getting the top() for funding-areas, about-us and our-projects on document ready and maybe those elements are not yet completely loaded and resized. I’d try to move the three variable declarations insite the click function

    $(‘#anchor-aboutus’).click(function(event) {
    var slowScrollFunding = $(‘#funding-areas’).offset().top;
    var slowScrollAbout = $(‘#about-us’).offset().top;
    var slowScrollProjects = $(‘#our-projects’).offset().top;

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".