Anchor Link Scroll Effect Using a Hubspot CTASOLVE
May 19, 2017 11:57 AM
Hi, Im trying to add a link to a cta button so that when clicked the page scrolls. Unfortunatly in the cta edit I need to add a valid URL protocol to the link field. I can only add the whole url which forces the page to reload to the anchor point rather than allowing me to just add #anchorname into the link field.
Is there any way that I can use hubspot cta buttons to call a #anchorname only?
Solved! Go to Solution.
May 22, 2017 3:17 PM
Is there a reason your trying to use a CTA for this vs a regular HTML anchor tag? CTA's are used to track views, clicks and submissions for converstion analytics. I don't see a whole lot of value using a CTA over a standard HTML anchor link for in-page navigation.
Oct 29, 2020 3:34 PM
I've been able to hack this. It's not the prettiest jump-down (the page reloads quickly but starts at the anchor), but it does work. My landing page was unlikely to get organic traffic during a few minutes when I published it while unfinished, so if that's a concern for you, this may not be a solution for you.
Here's what I did for my landing page:
- Create the anchor at the point down the page.
- Add a CTA at the top, with the URL facing any random page.
- Publish the page.
- Take the published page URL and add ?#[anchor] to the end of it. Copy that text.
- Edit the CTA in Hubspot so that it points to [URL]?#[anchor]. You will have to select "External page" in order to paste the URL in.
- Refresh the page to test it. When you click the CTA you will see the page load again really quickly but it will jump down to the anchor.