CMS Development

Woodsy
トップ投稿者

Anchor Link Scroll Effect Using a Hubspot CTA

解決

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?

2件の承認済みベストアンサー
ndwilliams3
解決策
キーアドバイザー

Anchor Link Scroll Effect Using a Hubspot CTA

解決

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.

元の投稿で解決策を見る

ariele-hint
解決策
メンバー

Anchor Link Scroll Effect Using a Hubspot CTA

解決

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:

  1. Create the anchor at the point down the page.
  2. Add a CTA at the top, with the URL facing any random page.
  3. Publish the page.
  4. Take the published page URL and add ?#[anchor] to the end of it. Copy that text.
  5. 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.
  6. 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.

元の投稿で解決策を見る

24件の返信
AlexHodgson
メンバー

Anchor Link Scroll Effect Using a Hubspot CTA

解決

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

0 いいね!
ChocolateFilms
メンバー

Anchor Link Scroll Effect Using a Hubspot CTA

解決

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.

0 いいね!
JasonRosa
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect Using a Hubspot CTA

解決

@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-h...) to add an anchor ID to the end of an absolute URL. 

pniebrzydowski
参加者

Anchor Link Scroll Effect Using a Hubspot CTA

解決

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.