Any one know how to offset anchor...

User 2695940 Photo


Registered User
53 posts

Hi everyone,
I have a few sites that use anchor links to different sections on the page and on sites with a fixed menu the anchor link needs to be offset from the top of the page below the menu so that the heading is exposed. Any suggestions or ideas would be greatly appreciated.
Thanks!
John Ferguson
Website Design and Development
www.jf1.co
User 122279 Photo


Senior Advisor
12,713 posts
Online Now

If I have understood you correctly, you can find several such menus in my sharing site. The best example I think is the 'One pager', where I explain it a bit, but also the 'Magellan' menu and the 'Sticky vertical' menu can be used to look at to achieve the effect. Url to the sharing site is found in my signature.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2695940 Photo


Registered User
53 posts

Hi Inger,
Sorry but I must not have correctly explained what I need.
My menu if fine but when I have an anchor link to a section on the page, I need to offset from the top of the anchor link a certain number of pixels so that the anchor (in this case the section title) is not directly behind the fixed menu.

I was hoping that there was some sort of offset setting within SD 4.0 but I could also use CSS I'm thinking.
John Ferguson
Website Design and Development
www.jf1.co
User 122279 Photo


Senior Advisor
12,713 posts
Online Now

That is exactly how I understood it. There isn't anything in SD doing this automatically, you need to adjust it yourself. In the 'One Pager' menu I explain a little about it, what I call 'fiddling'. And don't make the section heading the anchor, let it be the section itself, with some padding down to the heading, so that the heading becomes visible.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2699991 Photo


Registered User
2,568 posts

John Ferguson wrote:
Hi Inger,
Sorry but I must not have correctly explained what I need.
My menu if fine but when I have an anchor link to a section on the page, I need to offset from the top of the anchor link a certain number of pixels so that the anchor (in this case the section title) is not directly behind the fixed menu.
Attributes = data offset value + or -

If not avaliable then do a custom a tribute and name it data-offset


I was hoping that there was some sort of offset setting within SD 4.0 but I could also use CSS I'm thinking.
The Help You Need: When You Need It The Most
User 2695940 Photo


Registered User
53 posts

Thanks Inger and Wayan,
I think one of these ideas will work.
John Ferguson
Website Design and Development
www.jf1.co
User 2699991 Photo


Registered User
2,568 posts

John Ferguson wrote:
Thanks Inger and Wayan,
I think one of these ideas will work.


Actually Both of the ideas work, just a matter of deciding which one,, or even combining the 2

I must apologize though once again I was using my phone to reply before and something went amiss again,, think I need a new phone

So the instructions to offset the anchor link are

On the trigger (link) set the attributes
"data-smooth-scroll" which is available in the drop-down list
Then set a "Custom" attribute title= "data-offset" value = the number of pixels you wish to offset the anchor link by a positive (+)number stops the scroll before the top of the screen a negative number (-)stops the anchor AFTER the top of the screen

In all the sites that I do if there is to be an anchor link I usually do a combination of both suggestions by putting a little padding to whatever is the first element in the section and the data offset attribute (added to the trigger, not the anchor)

You can adjust the speed of the smooth scroll from the default 500 : to speed it up then once again add a custom attribute of "data-animation-duration" in value enter a number (eg 1000) to make the scroll faster or (eg. 300) to make it slower.
The Help You Need: When You Need It The Most
User 2695940 Photo


Registered User
53 posts

Thanks again Wayan, worked a treat. I'm sure I'll be using this hint often.
John Ferguson
Website Design and Development
www.jf1.co

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.