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?
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: Smooth Scrolling | CSS-Tricks
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
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
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
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
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 
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!
Hi Stefen, where do you add the javascript&colon?
@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>
Thanks Stefan, this worked perfectly for me. Really simple solution. Much appreciated.
Hi Vanessa,
From the sound of it, it sounds like you’re looking for a smooth scrolling effect. This can be down easily with just a little bit of jQuery.
You can insert this snippet into your JS file, or the head-tag of your template:
$(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;
});
});
});
What this snippet does is that it looks for any of your href’s that include the hash(#) and uses `e.preventDefault()` to prevent the typical linking function. Which then allows you to add an animate to use as the new linking function. As long as you have a link with a hash (ie: <a href=“#link1”>Link 1</a>) and a div with a coresponding name, (ie: <div id=“link1”>Link 1’s div</div>), this function will fire. You can also see a quick example I mocked up for you here on JSFiddle.
An important thing to note is that you can change the speed of the animation by changing the `900` in the function, this number works in “ms”, so 900 is actually 900ms. This speed defines how long the whole animation will last.
Hope this helps!
-- Ty
Hi Ty
Looking to do the same thing here. I can’t seem to implement this and not quite sure what I’m missing… I’ve added it to the head but no change.
I’m trying to put the effect on the ‘Let’s work together’ link here: https://www.zoodigital.com/contact
Any advice?
Cheers, Jonny
Hi @JonnyZOO,
I ended up rewriting this over the weekend to make it a little more compact, you could try replacing the original code with this instead.
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
Then change the 500 to adjust speed. Remember when using animate in jQuery the numbers are read in milliseconds. So 1000 would be a 1-second scroll effect.
Let me know if this works for you!
-- Ty
Hi @JonnyZOO,
I updated your header, but it was because you forgot to wrap the script in script tags. Anytime you place javascript into what is considered an HTML file, such as the head, or body of a page, you will need to tell the browser that the following text is to be read as a javascript command.
I checked your page and it seems to be working now, let me know how it looks on your end!
-- Ty
Awesome, good stuff Ty - thank you!
Thank you for sharing this code. I have added it to the header of a landing page template, but now any other links on the page (logo in nav and social buttons in footer) don’t go anywhere when you try and click on them. If you hover over the logo or icons, it shows the web address that it should be doing to. The jss code is blocking the links for some reason. Any way to fix this? Is there a way to apply that code only to that specific button?
This is the page where I am having the issue. The “Save my seat” button in the banner image works, but no other links are clickable - http://www.alignex.com/mechfuse-2017
Hey @leckerman,
Just to explain this code a little better, this was for a specific use case where someone didn’t have other anchor tags on their page, so we were able to target their link by just using the `a` tag. When you introduce more links to a page, such as social, it needs a little more scoping.
I’ll break this code down user colors:
$(document).on('click', 'a', function(event){
event.preventDefault();
});
So here is the basic declaration we are calling.
Blue
is your action, how you will trigger the event
Red
is your target, what will be triggering this event
Green
is your functions arguments/params
So let’s take a look at what’s happening, essentially this function is read as
"After load, when the
target
is
clicked,
do the code in the function. Now let’s look at our
params
we set. We’re catching the ‘event’. A default event for an <a> is to take you to their href=“” value. That’s what this line is in there for. event.preventDefault();
With this line we are basically telling the page on clicking an ‘a’ tag, to not let it take you to it’s proposed href value. (even if you’re using a dummy link, such as ‘#’).
Your Solution
For this use case, I would suggest writing a class name on the button you need clicked, such as ‘.scroll-cta’ and replacing the ‘a’ with that. That way, you’re code is only scoped to that specific class, and you don’t have to worry about having multiple a-tags or links on a page.
Your new code would look something like this:
$(document).on('click', '.your-new-btn-class', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
Try this and let me know how it goes, if it’s still not working, it will help narrow down what could be going wrong.
Hope it helps!
-- Ty
Thanks @Ty! I can’t seem to make it work using a class name instead of “a”. Does a new class have to be added and called out on the css document that is linked to the template or can I just use a class that was already in the rich text module, like below? I tried the below code and also tried creating a new class called “scroll-btn” that isn’t called out in the css doc, but neither worked.
This code is in a rich text module and the class “btn” was previously defined to style the button. I didn’t make a new class name. I am not using it as a CTA.
<p><span class=“btn”><a href=“#savemyseat” style=“text-decoration: none;”>SAVE MY SEAT</a></span></p>
This code is the the head of the template under “Additional HTML Head Markup for this Layout”
<script>
$(document).on(‘click’, ‘.btn’, function(event){
event.preventDefault();
$(‘html, body’).animate({
scrollTop: $( $.attr(this, ‘href’) ).offset().top
}, 500);
});
</script>