FORUM START A THREAD
START A THREAD
AUS INFRONT FORUM
Welcome to the Aus Infront forum. Fun place to hang out, see some work, share your thoughts and get some help. All we ask is that you play nice and that you don't feed the trolls.
Start A ConversationRULES & HOW TO USE THE FORUM
SOCIAL CONDUCT
A FEW SIMPLE RULES
• This forum is for the specific use of Australian creatives. Keep your post short and relevant.
• Remember to show respect to your fellow prospective colleagues (and potential future clients).
• Spamming, phishing or job ads are not allowed in this forum. Administrators have the right to delete your post if you don’t play nice.
• Repeat offenders will be banned from the forum permanently.
For further clarification, please refer to our Rules of Conduct.
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'

dave
JOINED 16.01.10
POSTS 2517
— WEBSITE
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;
});