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
phaslehurst
Member

Anchor Link Scroll Effect

Hey guys

Been trying to get something like this working on my site with no luck thus far. Have worked through the thread trying the proposed solutions and am sure I'm missing something critical but not obvious to me. 

 

I'm trying to get the 'FIND OUT MORE - GET IN TOUCH' link on this page to scroll smoothly to an anchor I defined near the top of the page. 

 

http://www.adglow.com/web-summit-follow-up?hs_preview=WNNSdvRh-5436505723

 

I have included this script in the head:

<script>$(document).on('click', '#top', function(event){
event.preventDefault();

$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});</script>

 

And have set up the link like this:

<p><strong><a href="#top">FIND OUT MORE - GET IN TOUCH NOW</a></strong></p>

 

Help appreciated. 

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

Hi @phaslehurst,

Looking at your code, it seems you're calling your href as if it was an id.

In the line 

$(document).on('click', '#top', function(event){ }

 

This is saying "On click of element with the id of "top", perform this function". But your button is just an <a> with the href of #top.

<p><strong><a href="#top">FIND OUT MORE - GET IN TOUCH NOW</a></strong></p>

To fix this, you can either add a unique class or id to your <a> then call your function with that element's id or class. So the easiest fix would be changing your text link to this:

<a id="top" href="#top">FIND OUT MORE - GET IN TOUCH NOW</a>

Let me know how this works out for you!

-- Ty

0 Upvotes
jesserowe
Member

Anchor Link Scroll Effect

Hi Tyler,

 

I'm also trying to add the scroll effect to this page here: 

http://updox-1871178.hs-sites.com/updox-pharmacy-connect-stage

 

Unfortunately, I'm not having any luck with getting this implemented. Any advice?

 

Thanks in advance! 

-Jesse

 

 

0 Upvotes
phaslehurst
Member

Anchor Link Scroll Effect

***UPDATE***

Don't worry Ty, I managed to make it work using your original method suggested right at the start of the thread. Thanks for your willing help!

 

Hi Ty

 

Thanks for your prompt response, really appreciate it. Sadly, however, I'm still not able to achieve what I'm looking for. I made the change you suggested and the result was that the smooth scroll animation happened, but it didn't scroll to the anchor I had defined - it simply scrolled the button/link to the top of the page. 

I'm looking to smoothly scroll back to a specific anchor point on the page on click. Perhaps we can go back to basics and you can just describe the best way to do that to me?

Thanks again in advance. Smiley Happy

Phil

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

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

avherzberg
Participant

Anchor Link Scroll Effect

Hi there,
I'm looking to do something similar, but I think it requires a little bit of different coding (if it's possible to do).

I am wanting to create a button within a custom html module that will be a scrolling anchor link to an image contained within a rich text module farther down on the same page.

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

Hey there @avherzberg,

 

This should work just the same, in your custom HTML module, you should create your link with a hash, ie:

<a href="#your-id">Link Text</a>

Then in the rich-text module you will want to make sure either the image OR the module is tagged with your id, for example:

<img id="your-id" src="your-img-src" alt="your image alt text" />

Keep in mind that in your "Image ID", you will not be including the '#', you only use that in your a tag's href to tell the page to look for the the element with an ID that matches your 'your-id'.

 

Let me know if you have any other questions!

-- Ty

0 Upvotes
JonnyZOO
Contributor

Anchor Link Scroll Effect

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

 

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

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 

JonnyZOO
Contributor

Anchor Link Scroll Effect

Hi Ty

 

Thanks for the quick reply. I've added this code to the custom head but I'm getting a message of 'There is invalid markup in your custom head'.

Screen Shot 2017-07-05 at 14.27.43.png

 

Any ideas?

 

 

Cheers, Jonny

ekpierce
Contributor | Elite Partner
Contributor | Elite Partner

Anchor Link Scroll Effect

This is exactly what I was looking for, thanks!

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

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.

 

Screen Shot 2017-07-05 at 9.34.50 AM.png

I checked your page and it seems to be working now, let me know how it looks on your end!

-- Ty

leckerman
Top Contributor

Anchor Link Scroll Effect

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

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

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

WalshCheryl71
Contributor

Anchor Link Scroll Effect

Hi, I am not looking for scroll but I am trying to figure out why my menu link takes me to the middle of a DIV where the Anchor is rather than taking me to the actual location of the anchor.  Any help is appreciated.

 

0 Upvotes
leckerman
Top Contributor

Anchor Link Scroll Effect

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>

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

@leckerman

 

Alright, I see you issue.

 

So you have it set up so when you click the class of 'btn', it prevents the default event (which should be linking it to your #id). 

 

However, you're html doesn't have an <a> tag with the class of 'btn'.

 

<span class="btn"><a href="#savemyseat" style="text-decoration: none;">SAVE MY SEAT</a></span>

So what you need to do is scope your actions down so that your trigger is clicking the href.

 

 

This can be done in 2 different ways, editing the script, or editing the html.

 

 

Editing your script

 

$(document).on('click', '.btn a', function(event){ });

By adding '.btn a' you are telling your script to only execute your function when you click the <a> child within the '.btn' parent.

 

 

Editing your HTML

<span class="btn"><a href="#savemyseat" class="link-btn" style="text-decoration: none;">SAVE MY SEAT</a></span>

You can add a new class in your html on your <a> tag to handle this function as well, I used 'link-btn' for a naming convention, but feel free to use whatever you want.

 

Then remember to adjust your function command accordingly

$(document).on('click', '.link-btn', function(event){ });

Either of these solutions should fix your issues, let me know if you're still having some trouble!

 

-- Ty

leckerman
Top Contributor

Anchor Link Scroll Effect

Hi @Ty,

 

Any idea why the following javascript that makes my mobile navigation work is preventing my anchor scroll buttons to work on mobile? If I remove any navigation and the below javascript that is embeded in a custom HTML module at the bottom of the template, the buttons work in mobile.

 

Here is an example of a page below. I had to create a mobile button (hide on desktop) and a desktop button (hide on mobile) for each page if I want to use the scroll javascript on desktop. 
http://www.alignex.com/mechfuse-2017

 

<script>
/*-------------------------------------------------------------------------------*/
/* MOBILE NAV - TOGGLE SIDE MENU
/*-------------------------------------------------------------------------------*/
$(function() {

// Prepend a mobile icon to the header
$(".custom-menu-primary").after('<a class="mobile-icon"><span></span></a>');

// Prepend a close icon to the menu
$(".custom-menu-primary .hs-menu-flow-horizontal>ul").before('<a class="close-icon"><span></span></a>');

// Add body class on mobile icon click
$(".mobile-icon, .close-icon").click(function(){
$("body").toggleClass("show-mobile-nav ");
});

// Dropdown sub menu
$(
".hs-menu-depth-1.hs-item-has-children"
).not(".active-branch:nth-child(2)").click(function() {
$(this).toggleClass("drop");
$(this).find("> ul").toggle();
});

// Set the menu height to 100% of the document
function setMenuHeight(){
var height = $(document).outerHeight(true);
$(".custom-menu-primary").height(height);
}
setMenuHeight();

// Wrap body contents with a div so the transforms will work
$('body> div').find('script:not(script[type="IN/Share"])').remove().end().wrapAll('<div id="site-wrapper"></div>');

});

</script>

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

Anchor Link Scroll Effect

Hi @leckerman, took me a minute, but I think i have a solution for you.

 

Alright, so first thing is, I noticed you weren't using the same button from desktop to mobile. You have two parent divs .hide-on-mobile and .hide-on-desktop. Since you have 2 buttons, only one of them had the class '.link-scroll' on it. 

 

I hopped into your portal and added the class on the mobile version, that's step 1. Step 2 is, when you go into a mobile screensize, you are adding this css code

 

@media (max-width: 1024px)
body, html {
     height: 100%; 
}

For this Javascript to work, you will need to remove the 'height: 100%;' property.

 

Hope this helps you out!

-- Ty

0 Upvotes
leckerman
Top Contributor

Anchor Link Scroll Effect

Hi @Ty - That does fix the issue, however my navigation on mobile and destktop BOTH disapear when I comment out this code on the css doc... 

 

@media (max-width: 1024px) { 
body, html {
height: 100%;
}

 

I removed the "link-scroll" class on the mobile button, because that was my work-around to try and get the button to at least work as an anchor link. When that class is on the "hide-on-desktop" module (mobile only) the button doesn't work AT ALL. I am leaving it as is for now, but will need to take it off sometime today if I can't get the issue fixed. 

 

Any suggestions? Thank you!!

0 Upvotes