# Anchor Link Scroll Effect

**URL:** <https://community.hubspot.com/t/anchor-link-scroll-effect/471>\
**Category:** CMS Development\
**Created:** [November 25, 2016, 2:56pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471 "2016-11-25T14:56:48Z")\
**Posts on this page:** 14\
**Page:** 2

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [July 24, 2017, 7:21pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/21 "2017-07-24T19:21:34Z")

</div>

@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

```auto
$(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

---

<div class="post-metadata">

**Author:** ![leckerman](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/leckerman/32/99678_2.png) [@leckerman](https://community.hubspot.com/u/leckerman)\
**Post date:** [July 24, 2017, 7:26pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/22 "2017-07-24T19:26:31Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![leckerman](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/leckerman/32/99678_2.png) [@leckerman](https://community.hubspot.com/u/leckerman)\
**Post date:** [August 9, 2017, 9:29pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/23 "2017-08-09T21:29:25Z")

</div>

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](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\>

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [August 18, 2017, 8:42pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/24 "2017-08-18T20:42:17Z")

</div>

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

```auto
@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

---

<div class="post-metadata">

**Author:** ![leckerman](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/leckerman/32/99678_2.png) [@leckerman](https://community.hubspot.com/u/leckerman)\
**Post date:** [August 21, 2017, 1:13pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/25 "2017-08-21T13:13:30Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![WalshCheryl71](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/walshcheryl71/32/73373_2.png) [@WalshCheryl71](https://community.hubspot.com/u/WalshCheryl71)\
**Post date:** [November 22, 2017, 7:36pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/26 "2017-11-22T19:36:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ekpierce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ekpierce/32/68296_2.png) [@ekpierce](https://community.hubspot.com/u/ekpierce)\
**Post date:** [April 17, 2018, 3:44pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/27 "2018-04-17T15:44:24Z")

</div>

This is exactly what I was looking for, thanks!

---

<div class="post-metadata">

**Author:** ![avherzberg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/avherzberg/32/84083_2.png) [@avherzberg](https://community.hubspot.com/u/avherzberg)\
**Post date:** [January 18, 2018, 9:17pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/28 "2018-01-18T21:17:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [February 1, 2018, 4:01pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/29 "2018-02-01T16:01:26Z")

</div>

Hey there @avherzberg,

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![JSiglos](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@JSiglos](https://community.hubspot.com/u/JSiglos)\
**Post date:** [May 3, 2024, 4:06pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/30 "2024-05-03T16:06:24Z")

</div>

Hello Ty, thanks for sharing. I’m a newbie at coding. I added this in the Settings \> Advanced but it only pasted word per word of the code in the header of the page. How exactly can I add this code to make the smooth scroll effect. Sorry for the stupid question. Hope you can help out.

---

<div class="post-metadata">

**Author:** ![phaslehurst](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/phaslehurst/32/22116_2.png) [@phaslehurst](https://community.hubspot.com/u/phaslehurst)\
**Post date:** [November 21, 2017, 1:36pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/31 "2017-11-21T13:36:15Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [November 21, 2017, 5:10pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/32 "2017-11-21T17:10:06Z")

</div>

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.

```auto
<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:

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

```

Let me know how this works out for you!

-- Ty

---

<div class="post-metadata">

**Author:** ![phaslehurst](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/phaslehurst/32/22116_2.png) [@phaslehurst](https://community.hubspot.com/u/phaslehurst)\
**Post date:** [November 22, 2017, 11:17am UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/33 "2017-11-22T11:17:31Z")

</div>

\*\*\*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.  
 ![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png)

Phil

---

<div class="post-metadata">

**Author:** ![jesserowe](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jesserowe/32/27089_2.png) [@jesserowe](https://community.hubspot.com/u/jesserowe)\
**Post date:** [November 27, 2017, 2:58pm UTC](https://community.hubspot.com/t/anchor-link-scroll-effect/471/34 "2017-11-27T14:58:51Z")

</div>

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](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

[Previous page](https://community.hubspot.com/t/anchor-link-scroll-effect/471.md?page=1)