CMS Development

Woodsy
Stratege/Strategin

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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 Akzeptierte Lösungen
ndwilliams3
Lösung
Autorität

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.

Lösung in ursprünglichem Beitrag anzeigen

ariele-hint
Lösung
Mitglied

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.

Lösung in ursprünglichem Beitrag anzeigen

24 Antworten
Conescu
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

@CristianA nailed it. I just added his code to my global nav, and it works like a charm. 

 

The only thing I would add is to paste the code in the Footer HTML. (If you load it in the Header, it will slow the page down.)

 

HubSpot-anchor-scroll-js-small.jpg

 

In the main page Settings, choose Advanced, and paste this code in the Footer HTML.

 

 

<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();

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

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

 

0 Upvotes
mwx_kk
Mitwirkender/Mitwirkende | Platinum Partner
Mitwirkender/Mitwirkende | Platinum Partner

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

You could simply add 

scroll-behavior: smooth;

to your body-css and anchors should work fine on all pages without any scripting.

0 Upvotes
therobert
Mitwirkender/Mitwirkende | Diamond Partner
Mitwirkender/Mitwirkende | Diamond Partner

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

We all just need a simple "Add A Button" option in the WYSIWYG with the option to add a url (or hash to an achor) and a field for some css classes to style it. 🙂

ariele-hint
Lösung
Mitglied

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.
CamiloVGLT
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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

0 Upvotes
ndwilliams3
Autorität

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.

0 Upvotes
CristianA
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

Does anyone have an update on this?

spif
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.,

 

0 Upvotes
spif
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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

 

Stumped.

0 Upvotes
CristianA
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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:

 

<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();

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)

amfiore
Mitglied

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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

0 Upvotes
Cristian_A
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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

0 Upvotes
ChocolateFilms
Mitglied

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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

ringo-at-wt
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.

crystalcha
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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!

gra-benjamin
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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

Greg_Batenburg
Teilnehmer/-in

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.

 

Capture.PNG

 

@hubspot, can we make this happen?

yidanwang
Mitwirkender/Mitwirkende

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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

ndwilliams3
Lösung
Autorität

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

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.

wqoeiqoweiqwoei
Mitwirkender/Mitwirkende

Anchor Link Scroll Effect Using a Hubspot CTA

lösung

Well, maybe someone wants to track the clicks on this button? It's OK that you don't see a whole lot of value in it, but that's just your opinion and not an answer.