Forums

amyth91

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

Hompimpa

Decrease the offset top:

var targetOffset = $target.offset().top-50;

amyth91

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

here,
code

Hompimpa

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

amyth91

thanks a lot :)

treehouse : what would you like to learn today?

Forums

[Solved] adding margin-top to scroll.js