topic Re: Anchor Link Scroll Effect Using a Hubspot CTA in CMS Development

Anchor Link Scroll Effect Using a Hubspot CTA

Woodsy — Fri, 19 May 2017 15:57:21 GMT

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?

Re: Anchor Link Scroll Effect Using a Hubspot CTA

ndwilliams3 — Mon, 22 May 2017 19:17:18 GMT

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.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

JasonRosa — Tue, 23 May 2017 18:08:58 GMT

@ndwilliams3 I would completely agree! Unless you had a specific reason for doing so, I wouldn't think that a page navigation would need to be built with CTAs. @Woodsy I don't believe that you can use relative URLs in the CTA tool but you can follow along with the instructions in this Academy article (https://knowledge.hubspot.com/articles/kcs_article/cta/can-i-use-an-anchor-id-in-the-url-link-of-a-hubspot-call-to-action-button) to add an anchor ID to the end of an absolute URL.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

pniebrzydowski — Thu, 19 Oct 2017 12:27:21 GMT

What about the case of a single page application or a long single-page site with scrolling navigation? It also seems that it's not possible to handle the click of a CTA with a script in a way that allows the tracking functionality to be passed. It's severely limiting that CTA buttons can only be used to navigate to a different page. It is possible to use the hash navigation, but then you are still reloading the page and have the odd "jump" effect. Having the ability to send the tracking via a script API and handle the click, or at least the ability to use a relative URL would be incredibly useful in terms of flexibility.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

ringo-at-wt — Tue, 19 Dec 2017 23:40:22 GMT

This would be an awesome addition.

We just launched a landing page with a form at the very bottom, so we used CTAs throughout the page to bring people down to the form instead of linking to a completely new page.

Some of you asked why you'd do this? Well, here were a few of our motivators:

Saves on load time. They've already loaded the page they need to be on.
Track CTA performance. We can see what section triggered someone to click.
Run tests. Based on a combination of CTA, section order, copy, imagery, and audience — we can optimize each for the best conversions.

With the current implementation of CTA's anchor URL behavior and limitations, it creates a rough user experience as the page reloads, the screen flashes, and then they're teleported down to the form.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

yidanwang — Sat, 08 Dec 2018 00:22:02 GMT

@ringo-at-wt Well said and so true! Hubspot please consider implementing current page Anchor CTAs!

Re: Anchor Link Scroll Effect Using a Hubspot CTA

Greg_Batenburg — Thu, 13 Dec 2018 22:07:22 GMT

Yes, I agree fully with this too. This would also be particularly useful for using CTA's to drive popup modals identified through anchor IDs or CSS IDs.

@hubspot, can we make this happen?

Re: Anchor Link Scroll Effect Using a Hubspot CTA

gra-benjamin — Wed, 09 Jan 2019 14:49:04 GMT

This is something that has come up on several of my projects. I would love this addition to the toolset.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

crystalcha — Wed, 16 Jan 2019 17:01:37 GMT

100% agree, I would love to use CTAs for all of the reasons @ringo-at-wt mentioned as well, right now the experience you've described is what we are using and it's suboptimal. Would be great if HubSpot could implement this!

Re: Anchor Link Scroll Effect Using a Hubspot CTA

ChocolateFilms — Thu, 28 Feb 2019 11:33:28 GMT

I totally agree! Please can someone provide a solution for this?

I want to use an Image CTA (button), so the anchor text solution is no option. At the moment I am using id="page-part" and linking the CTA to our url#page-part but this causes the page to reload, which is slower than scrolling, so unwelcome.

Thank you

Re: Anchor Link Scroll Effect Using a Hubspot CTA

CristianA — Wed, 20 Mar 2019 09:42:27 GMT

Does anyone have an update on this?

Re: Anchor Link Scroll Effect Using a Hubspot CTA

spif — Fri, 05 Apr 2019 14:15:40 GMT

Just chipping in that I'm having this exact issue as well and found this thread through a search on using same page CTA.

In the mean time I will use a link in a rich text field using the HTML - to add the button style.

Which looks like this ->

<div style="text-align: center;">
<a href="/built-for/agencies#cta-link" class="smoothscroll btn btn-outline" rel=" noopener">Get in touch</a>
</div>

@hubspot -> Would be nice to have this as an option in the "official" CTA's components.,

Re: Anchor Link Scroll Effect Using a Hubspot CTA

spif — Fri, 05 Apr 2019 14:20:02 GMT

Actually Hubspot overrules the href in a rich text so the above is broken as well...

Stumped.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

ChocolateFilms — Mon, 15 Apr 2019 10:19:41 GMT

I'm using a CTA button (from image file) as opposed to a link. So yes, there is still a reason to find another solution for this issue.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

CristianA — Mon, 05 Aug 2019 06:39:51 GMT

A temporary solution (maybe):

1) after you added your anchor link, use the following for the button <a href="#scrollUp" ..., or whatever name you assigned to the anchor link in your HTML.

2) in the page's advanced settings add the following jQuery code:

var target = this.hash,
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, function () {
window.location.hash = target;
});
});
});
</script>

Note: you can change '900' to a value that suits you best for the scrolling speed (the value is written in milliseconds, so that's 0.9s)

Re: Anchor Link Scroll Effect Using a Hubspot CTA

CamiloVGLT — Wed, 27 May 2020 15:18:15 GMT

Does anyone found a solution for this? I'm totally agree with ringo-at-wt

Re: Anchor Link Scroll Effect Using a Hubspot CTA

ndwilliams3 — Wed, 27 May 2020 15:39:12 GMT

I don't think this is achievable with a CTA. The CTA 'click' is registered via a redirect. Since a hash doesn't trigger a page load, there's no way to register the click. if you're on Enterprise edition, you could use the Events API to achieve similar tracking on traditional anchor links.

This is going to require Hubspot to 1) add a hash method to CTA's or 2) add an API endpoint for CTA's similar to the Events API.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

amfiore — Thu, 25 Jun 2020 13:58:48 GMT

Has anyone used this script? DOes it work? I can't get it to work.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

Cristian_A — Thu, 25 Jun 2020 14:03:49 GMT

Can you please paste a link to the page where you tried it? I might be able to provide some help if needed.

Re: Anchor Link Scroll Effect Using a Hubspot CTA

AlexHodgson — Thu, 09 Jul 2020 10:45:22 GMT

Hi,

I am trying to do this and there's a couple of reasons I need to use CTAs:

- Some of my modules have CTA blocks, so you can only select CTAs

- All my action buttons originate in CTA module, so if I need to replicate this as a regular link in order to use anchor, I need to style it identically I can't see a way to copy the styling from the CTA.

In this particular instance I want 2 CTAs side by side, 1 with a jump link and 1 with a link to a PDF, so they need to look and behave identically.

BTW I am not a coder/developer, hence trying to use Hubspot tools as much as possible.

Thanks

Alex