link to anchor in other site with offset

11 replies · opened Dec 17, 2023

Bbrano099Dec 17, 2023

Hi,
Is it possible to create a link to an anchor (id) on another page with an offset?
and is it possible to make it so that the anchor on that page is scrolled smoothly?
Thanks you
Brano

SSemicolon WebSTAFFDec 19, 2023

Hello,

This is already possible but the Hash Element on the Page must be either a One-Page or a ScrollTo Element:

  1. Simply make sure that you add the ScrollTo or One-Page Section on the Page. Example:
    [ch_pre]Scroll to Section[/ch_pre]

  2. Then add the Section ID on the Page where you want the users to Scroll to. Example:
    [ch_pre]<div id="some-section"></div>[/ch_pre]

  3. You can now use a hash link to Scroll to this Section from an external page:
    [ch_pre]Scroll to this Section[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Bbrano099Dec 19, 2023

but I would need this and with off-set Scroll to this Section
so that a section on another page <div id="some-section"></div>
is displayed with an offset
is it possible?
thank you

SSemicolon WebSTAFFDec 19, 2023

Hello,

Yes, you will need to add the data-offset="50" on the Section. Additionally, make sure you are using the Latest Version of Canvas as this has been introduced recently. For Older Versions, Customizations must be done manually.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Bbrano099Dec 19, 2023

so link should be like this? [Scroll to this Section](some-other-page.html#some-section)
because it isnt work

SSemicolon WebSTAFFDec 19, 2023

Hello,

The code you are using is incorrect. The data-offset should be added to the Link on the Page which has the Section you need to scroll to from the external page. Consider rechecking the code samples provided above.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Bbrano099Dec 19, 2023

I'm still not getting it
so I have a link on one html page [Scroll to this Section](some-other-page.html#some-section)
and on the other id with offest ``
and it doesn't work
i have latest version of canva

SSemicolon WebSTAFFDec 20, 2023

Hello,

Please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFDec 21, 2023

Hello,

Yes the codes you are using is incorrect and not based on the code samples provided above. Consider adding the following code on the Page that has the #8J Table:
[ch_pre]Section 8J[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSemicolon WebSTAFFDec 21, 2023

Hello,

We have checked this out and the issue is with the HTML ID starting with a Number. HTML IDs must start with Alphabets and then you can use numbers as required. Here is a detailed explanation on this: https://www.thoughtco.com/what-is-the-id-attribute-3468186#:~:text=Rules%20for%20Using%20the%20ID%20Attribute&text=The%20ID%20must%20start%20with,%2C%20and%20periods%20(.). So changing 8J to something like section-8J should fix this issue.

Additionally, please check our Live Previews: https://canvastemplate.com/op-index.html#section-works as it appears to be working fine for us.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard