Grow your CSS skills. Land your dream job.

adding margin-top to scroll.js

  • # April 24, 2012 at 9:29 am

    hi, here is the scroll.js, which i am using to create a smooth scrolling effect, now in the page, when i use the scroll.js and click on my links the scroll works fine, but the page sticks right to the top, as it margin-top is set to 0.

    how do i add a margin of “50″ to this js, so that whenever i scroll, the page has a margin-top:50px

    # April 24, 2012 at 1:28 pm

    Decrease the offset top:

    var targetOffset = $target.offset().top-50;
    # April 24, 2012 at 9:08 pm

    hi, it works, but then after 2 seconds it jumps back to the top.

    here,
    code

    # April 25, 2012 at 6:00 am

    It is because the animation callback change the URL hash after animation has finished. See here:

    $(this).click(function(event) {
    event.preventDefault();
    $(scrollElem).animate({scrollTop: targetOffset}, 1500, function() {
    location.hash = target; // < == remove this!
    });
    });

    change to:

    $(this).click(function(event) {
    event.preventDefault();
    $(scrollElem).animate({scrollTop: targetOffset}, 1500);
    });

    http://codepen.io/pen/74/1

    # April 25, 2012 at 7:32 am

    thanks a lot :)

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

You must be logged in to reply to this topic.

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