Australian Infront

JS help

Posted 19.07.2018 @ 1.42AM

Hey dudes,

Am using the below code to slow scroll a page when linking to an anchor tag. Not being a JS guru, can't work out how to add a 200px offset at the top, to give room for the fixed menu at top. Any help appreciated...
(dollar signs obviously showing as "S" below)

$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);

return false;
});

Posted 19.07.2018 @ 10.19AM

I haven't checked your actual code, but something like this should do it. Just change the #menu to suit your setup or hard code the height.

$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: ($('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - $('#menu').height() )+'px'
}, 500);

return false;
});

or hard code

$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: ($('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - 200 )+'px'
}, 500);

return false;
});

I'd recommend using a data attribute like 'data-link' instead of subtringing the href - more human readable and easier to debug/modify and a bit less brittle.

So instead of <a href="whatever">, you would have <a href="whatever" data-link="hatever"> and this should work:

scrollTop: ($('[name="' + $.attr(this, 'data-link') + '"]').offset().top - $('#menu').height() )+'px'

Posted 20.07.2018 @ 12.35AM

Perfect mate, thanks a lot!!