How to create a CTA that jumps down the page

Developer Support CMS Development
1

Hi there,

I’m trying to re-create a CTA that jumps to a certain segment of the page, to give an example: http://info.gainasoftware.com/erp-beverage-distribution-software

I’ve seen answers on here previously that just say “do <a> tags with links”, unfortunately I am a non-web designer who is doing web design, and I was wondering if anyone had even a link to a more comprehensive walkthrough of doing this?

2

@sdoherty

Even the most simple implementation of that functionality requires just a little bit of html editing (but it’s really simple). Edit your cta’s target URL to add a #mydiv at the end of the url. The # will let the browser know that we want to navigate to an HTML element.

Next, in your HTML page, add an id=“mydiv” to the element you want the button to navigate to.

<div id="mydiv">This is where the page will scroll to</div>

Now, when you click the button it should jump the page to your target content.

Notice I chose the word jump. In the example you gave us, they are using jquery to animate the page scroll which gives it that smooth scrolldown appearance on click. That will require some js logic, if you have a preview page, we could attempt to help you out with that.

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

3

You’re an absolute legend!!

I worked very closely with our web designer on putting the website together and he taught me bits and pieces of the simple code, and I’ve been learning more as I go by randomly clicking around/deleting things and hoping for the best - this has been an amazing piece of help, and thank you so much.

No way would I be expecting more than you’ve already done, but if it’s a simple fix, I’d love to learn how to make it scroll. It’s still a work in progress obviously, but you can find the preview page here: https://www.well-it.com/cuonlineplus?hs_preview=SZigtMKW-5895820262

4

@sdoherty - Awesome you found that helpful. Here’s the code that will animate that button to your form. Just drop the following javascript either into the raw_html module or somewhere in the header or footer of the page. Keep in mind, this code will be very specific to the page you linked me to, and probably won’t work elsewhere without modification. However, I could create a more dynamic solution if you hadd the # to the end of the url. But, anyway, this should work if you drop it in your page.

<script>
$(function(){
 $('#hs_cos_wrapper_cta1').find('a').on('click', function(e){
 $('html, body').animate({
 scrollTop: ($(".hs-form").offset().top - 200)
 }, 2000);
 e.preventDefault();
 return false;
 });
});
</script>

Happy Hacking!

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

5

This helped me set up the scroll effect as well. THANK YOU! :slightly_smiling_face: