CMS Development

Vanessa_megg
Member

Anchor Link Scroll Effect

Hello everyone, 

I have to create a one page website. At the top of the page, I place a horizontal menu with some anchor links. When a user clicks on one of these, will arrive on a specific section of the page with a scroll effect. 
Can I create a similar effect in a Website Page in Hubspot?

0 Upvotes
32 Replies 32
leckerman
Top Contributor

Anchor Link Scroll Effect

You did it @Ty! All fixed. Thank you so much for your help and for taking the time to explain why too. That was VERY helpful! 

0 Upvotes
JonnyZOO
Contributor

Anchor Link Scroll Effect

Awesome, good stuff Ty - thank you!

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Anchor Link Scroll Effect

yep. In a Rich Text module there is an option under the insert menu titled "anchor" that will place an ID on an empty "a" tag. Then you just need to link to that name the usual way - #linktoname.

You may also want to add smooth scrolling with this javascript: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Stefen Phelps, Community Champion, Kelp Web Developer
andreacru
Member

Anchor Link Scroll Effect

Hi Stefen, where do you add the javascript&colon?

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Anchor Link Scroll Effect

@andreacru if you only need it on the one page, I'd add it to that page under Settings > Advanced options > Footer HTML. Then make sure it's in a script tag like so:

<script>
// your javascript goes here
</script>

 Alternatively, you can also just use the new CSS version which looks like:

<style>
html {
  scroll-behavior: smooth;
}
</style>

 

Stefen Phelps, Community Champion, Kelp Web Developer
AKnight-Colater
Participant

Anchor Link Scroll Effect

Thanks Stefan, this worked perfectly for me. Really simple solution. Much appreciated. 

0 Upvotes
poojanadkarni1
Participant

Anchor Link Scroll Effect

Hi,

I have added anchor tag to my http://seerion-2310098.hs-sites.com/seerionlanding on section about the event. I have named the anchor as #about. Dont know where I am going wrong. But then I went in my advanced menu option and in the linking to page option i just entered #about . But when I actually click on about on my menu , it just displays blank.

Can you please tell me where m i going wrong?

 

TIA

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

Hi @poojanadkarni1,

 

Sorry you're having trouble with this, I took a look at your page and I noticed your link at the top "About The Event" is linking to "//seerion-2310098.hs-sites.com/seerionlanding/#about". What is happening here is that it is reloading the page and then taking you to the section with the id of "about".

 

For starters, change your link to just say '#about'. What will happen now is your browser will register that click and append '#about' into the url. There won't be a page refresh so it should just take you directly to the section.

 

As far as the scroll animation, I couldn't find where you were including the script. Could you clarify for me what file it was placed in? Your console isn't throwing any errors, but it may not be running correctly.

 

Let me know if this fixes your problem!

-- Ty

0 Upvotes
lisannebuisman
Member

Anchor Link Scroll Effect

Hi Ty,

 

Trying to do the same in a CTA on a HubSpot landing page: there is a button at the top which I'd like to link to the 'fill-out-this-form' section a little further down the page. For now, I have included the complete landing page URL + [#anchorlink] (in this case, '#facebookform'). Unfortunately, the CTA button now reloads the page entirely when clicked upon. And it does link to the right section on desktop, but not on mobile (then it just reloads the same page from the top). 

 

So I found your tip about linking directly to the anchor with a link starting in '#-'. For some reason, however, the CTA designer module in HS won't let me link to the anchor link '#facebookform' that I created for this landing page.

 

Does directly linking to a 'bare' anchor only work for standard links, or also in CTA buttons? And if so, how? 🙂

 

Thanks in advance for your help, cheers from Amsterdam,

Lisanne

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

Hi @lisannebuisman,

 

Do you have a sample page that you are working on that I could take a look at? 

 

Also, if you link to the page + your ID, your browser will reload on click because it is fetching that beginning URL. As for being able to linkto an anchor text in the CTA tool, I don't believe that field will accept just a hash-link. You will probably need to hardcode this into your page.

 

Let me know if you have any other questions!

-- Ty

0 Upvotes
lisannebuisman
Member

Anchor Link Scroll Effect

Hi @Ty

 

Thanks for the quick reply! (See how my rhiming is on point? 😉 )

 

This is the landing page: https://www.clevergig.nl/nl/facebook/planning-software-voor-jouw-flexibele-personeel .

 

But if the CTA link field doesn't except a '#anchor' link then I'm afraid it won't work for us 😞

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

Hey again @lisannebuisman,

 

So i tried coming up with a few solutions for you, but first here is the Knowledge article that confirms what can and can't be put in the CTA fields. I think i've come up with a 3 possible solutions for you, each having their own pros/cons depending on your skillset.

 

First Solution (easiest)

You leave the button as is, with the [url]#anchor_id, the reload isn't going to be the end-all-be-all of ux issues, but I do understand that it is a little annoying.

Pros: It's built in and the cta works as designed

Cons: Will create a slightly annoying UX

 

Second Solution (easy):
You can just hardcode the demo button into the section using plain HTML

<span class="hs-cta-node hs-cta-11420eeb-d4ce-4169-9ff3-84be0e6db6a8" id="hs-cta-11420eeb-d4ce-4169-9ff3-84be0e6db6a8" style="visibility: visible;" data-hs-drop="true">
<a id="cta_button_1794004_0d52d041-2aa9-45a5-810b-a198a4a3a07e" class="cta_button " href="#your_link_id" style="" cta_dest_link="https://app.hubspot.com/meetings/info11760" title="Demo wanneer het jou uitkomt">
<strong>
<span style="font-size: 15px;">Demo wanneer het jou uitkomt</span></strong>
</a>
</span>

Some pros an cons of this soution:

Pros: No extra scripting needed, just a simple hardcoded button. 

Cons: I don't think you'll be able to see the tracking – You may be able to hack it together where the ids match and HubSpot sees it by clicks on said ID, but I don't know that for sure.

 

Third Solution (Probably the hardest of these solutions):

You could write some custom javascript to replace the href of that specific button on page load. For example:

<script>
$( document ).ready(function() {
   $('#your_cta').attr('href', '#your_anchor_id');

});
</script>

Pros: If you know JS, it's easy to edit/implement

Cons: You most likely won't get the tracking info, if you don't know JS, you may have a hard time implementing/updating it. Creating 1-off solutions just overcome something like this (which is working as designed) isn't usualy the best idea.

 

Personally, what I would try first is to get the exact html code that makes your button and try hardcoding it into the templat with just the #anchor-id as your 'href'. Then do a couple tests to see if you can get it to track the click. – If it does, then I'd say go that route.

Hopefully one of these ideas helps you out and gets you on the right track, let me know if you have any other questions!

0 Upvotes