GBin GBin - 16 days ago 5
jQuery Question

ScrollMagic : Add offset to anchor scrolling?

I have an anchor link scrolling feature using ScrollMagic on a website, I'm trying to offset the scrollTo target by 100px along the y-axis, I'm quite new to jquery and am not sure where to put this sort of instruction:

'scrollTop': $target.offset().top - 100


Here is my working code (from: https://github.com/janpaepke/ScrollMagic/wiki/Tutorial-:-Anchor-Navigation):

$(document).ready(function() {

// Init controller
var controller = new ScrollMagic.Controller();

// Change behavior of controller
// to animate scroll instead of jump
controller.scrollTo(function(target) {

TweenMax.to(window, 2, {
scrollTo : {
y : target, // scroll position of the target along y axis
autoKill : true, // allows user to kill scroll action smoothly
},
ease : Cubic.easeInOut
});
});

// Bind scroll to anchor links
$(document).on("click", "a[href^=#]", function(e) {
var id = $(this).attr("href");

if($(id).length > 0) {
e.preventDefault();

// trigger scroll
controller.scrollTo(id);

// If supported by the browser we can also update the URL
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
};
});
});


Any pointers much appreciated.
Thanks

Answer

Oh Deary Me. After much unnecessary tinkering and modifying, the answer turned out to be much more simple than I could imagine.
Simply replace y : target with y : target-100.
Yes, I am an idiot.

Comments