Australian Infront

Login OR Register
  • News
  • Jobs
  • Folio
  • Forum
  • Profiles
  • Involved
  • Market
  • Twitter
  • Facebook
  • Instagram
Home / Forum / Technical / JS help
— BACK TO FORUM

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 Conversation

Creative Threads761

Discussion Threads5481

Help Threads736

News Threads2292

Off Topic Threads387

Technical Threads446

RULES & 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.

dave

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;
});

comment
pscysm

pscysm
JOINED 11.01.10
POSTS 438
— WEBSITE

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'

comment
dave

dave
JOINED 16.01.10
POSTS 2517
— WEBSITE

Posted 20.07.2018 @ 12.35AM

Perfect mate, thanks a lot!!

comment
ADD YOUR COMMENT

You will need to login or register to join the discussion.

©99-17 Australian Infront Pty Ltd
  • See All About Us
  • Read Our Copyright & Usage Policy
  • View Our Privacy Policy
  • Skim The Terms & Conditions
  • Learn Our Rules Of Conduct
Analogue
  • AUSTRALIAN INFRONT PTY LTD
  • PO Box 36
  • PORT DOUGLAS
  • QLD 4877
  • AUSTRALIA
Digital
  • General: gday@ausinfront.com
  • Support: support@ausinfront.com
  • FOLLOW US ON TWITTER
  • LIKE US ON FACEBOOK
  • SEE US ON INSTAGRAM
Thanks
  • HOSTING: DIGITAL PACIFIC
  • EMAIL MARKETING: MAIL CHIMP
  • PRINT DESIGN: SOUTHSOUTHWEST
  • DIGITAL DESIGN: AISTROPE
  • DEVELOPMENT: ZANN