[How-to] Add a Smart "Back to Top" Button

  • 4 February 2016
  • 32 replies
  • 1543 views
Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

tips-scripts-banner

Here is an incredibly simple (and effective) way to get leads back up to your form no matter where on the page they are. The button fades as the user scrolls, then disappears when they’re back at the top using some simple javascript/css.

You can see the final product built in Unbounce here:
http://landingpage.noahmatsell.ca/fade-in-scroll-back-to-top-button/

⚠️ WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Please note: This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Instructions: 

Step 1. Create a new button on your landing page, make note of the button ID in the properties panel on the right hand side.

Step 2. Paste the this CSS into your Stylesheets section:

<style>
  /* Replace #lp-pom-button-18 with the ID of your back to top button */
  #lp-pom-button-18 {
  position: fixed;
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  margin-bottom: 2%;
  margin-right: 2%;
  display: none;  
} 
</style>

Step 3. Replace #lp-pom-button-18 with the ID of the button from step 1.

Step 4. Paste the this JavaScript code in the Javascript section with placement ‘Before Body End Tag’:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
//ID of your back to top button
var backToTop = $("#lp-pom-button-18");
//The pixel amount scrolled before back to top button appears
var scrollAmount = 150;

$(window).scroll( function() {
  if ($(this).scrollTop() > scrollAmount) {
    backToTop.fadeIn();
  } else {
    backToTop.fadeOut();
  }
});

backToTop.click( function(e) {
  $("html, body").animate({scrollTop: 0}, 750);
});
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-03-029
*/
</script>

Step 5. Replace #lp-pom-button-18 with the ID of the button from step 1.

Step 6. Save and republish to see it in action!

Testing:
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion:
This is an incredibly simple way to get leads back up to your form no matter where on the page they are. Be sure to let us know how it works for you!

32 replies

C
Badge

Thank you! It worked with the lightboxes!

Oliver_Lord
Rank
Userlevel 4
Badge

We have the official documentation on anchor links and smooth scrolling here:
https://documentation.unbounce.com/hc/en-us/articles/360022719471-Adding-Anchor-Links-Smooth-Scrolling-in-the-Classic-Builder

 

C
Badge

Thank you! Do you have the tutorial on that to by chance? I’ve only been able to find ones on the “smart” back to top button

Oliver_Lord
Rank
Userlevel 4
Badge

OK. I’ll have a play around and see if I can get it to work in the lightbox. For the time being, you could add a static button at the bottom of the lightbox which scrolls them to the top as that function is working.

C
Badge

Yes, same issue

Oliver_Lord
Rank
Userlevel 4
Badge

Hmm,,, I think this might have something to do with the fact that lightboxes are iframed on top of the main page. I created this page, which has the back to top button both on the main page and in the lightbox. Whilst the fade in and out effect works just fine, as well as the scroll to top function, it just doesn’t move along when I scroll down the page. Is that what you’re experiencing too?

C
Badge

Yes, that is correct!

Oliver_Lord
Rank
Userlevel 4
Badge

Hey @ChelseaJordan,

 

Thanks for the question. Before I go ahead and test this out on my side, could you just confirm that you are looking to add the back-to-top button inside the lightbox, which, when clicked on, sends the visitor to the top of the lightbox?

 

Thanks.

C
Badge

This works great on the page, but I tried this for a lightbox and cannot get it to work properly. Is there anyway to get it to work in a lightbox?

Kathandrej

Thank you! Works very well but what do I need to do to change the “back to top” function to “open a lightbox” function? Thanks

Laserfocus
Badge

Hey guys, amazing post - thank you so much!!

For anyone interested, I made a short video here showing how to do this in Unbounce:

Hope this helps!

Ivan

L

Did anyone figure out how to make the button disappear on the bottom?

E

I’ve done all the necessary steps and my back to top button doesn’t seem to be working. Smooth scrolling is working fine though. Can someone help me?

Raj_Abramov

The button show up in desktop and mobile together, but I need it only on mobile…. How to I make it possible ?

A

@Noah
Hi, I’ve managed to apply the back to top button on my page: https://www.getfello.com/watisfello/
But, how can I manage that the back to top button starts at the same position as the one that is fixed on the top of the page? I played around with the numbers in the stylesheet, but it didn’t work. Hope you can help me!

S

Hi, Im hoping someone can help me here.

Ive managed to create the back to top button, except I want to add an ‘arrow’ to the button. As a newbie, I’m not sure where to place it in the JS code.

I’ve uploaded an image called ‘arrow-2’ to my images, but I have no idea where to place it within the script.

Ive attached a screenshot of of the current back to top icon. Hopefully I can hear from you guys how to fix this.

Scroll_Up

mclopezz

Thank you for this! Any way to make the button disappear when it gets to the form - no matter where it is on the page?

S

Hi Everyone,
I got a friend of mine who is a js wizard to help with this and he changed the function so it will go to the box that contains the form regardless of where it is on the page. On my system, it was at the top for desktop viewers and at the bottom of the page for the mobile users.
The change you need to make is to find the BOX that contains the whole form and copy that container’s id. My page used “#lp-pom-box-102” so you’ll need to replace my id with the one for your form.

Find the code

backToTop.click( function(e) {
   $("html, body").animate({scrollTop: 0}, 750);
});

and replace it with:

backToTop.click( function(e) {
   //$("html, body").animate({scrollTop: 0}, 750);   
   var learnmore = $("#lp-pom-box-102");
   var position = learnmore.position();
   $("html, body").animate({scrollTop: position.top}, 750);
 });

Be sure to change the id for the learnmore variable to the id for your form box container.
That’s it, rest of the code is unchanged.

S

Exactly what I needed…

I do have a question for you JS savvy people: Is there a way to scroll to the bottom of the page?

Right now, I have a form that appears at the top of page and this is perfect for getting people back to the form, on desktops.

However, for mobile devices, it works as expected except on mobile devices, the form appears at the bottom of the page but the button scrolls to the top of page.

Can anyone help out with some js to:

  1. scroll to bottom of page instead of top but only on mobile devices?
  2. scroll to bottom of page for desktop and mobile?

Thanks for any help!

Kenji_Sano

Is it possible to add a close button or something that allows users to hide the button?

Noah
Userlevel 7

Hey @Will1, a potential solution would be to use Mark’s responsive script seen below, and paste the Smart Button javascript under the ‘desktop code’ comment.

Here’s a link to Mark’s script: https://gist.github.com/markwainwright/9bcaf3165bee49c9d93b

Hope this helps point you in the right direction 🙂

W

Hi, I have another question, I started to work on the mobile version using the same code and replaced only the #ID, however I would like to hide it on the mobile version. I still see a box frame on my mobile version, is there a way to “desactivate” that frame/box?

Thanks

W

I forgot to change one of the ID, now it works.
Thanks so much! 🙂

J

Hey @Will1!

Two ideas.

  1. Are you making sure to copy the entire script and not just the truncated version? Be sure to click on show original under the scripts.

  1. Are you trying this on preview? You might have to publish your page to see the effect.
W

I copied and pasted the code for both CSS & Java script. How come my button is not following me when i scroll down?
Thanks!

My bad, I forgot to replaced one of the ID#.
Thanks it works perfectly now!

Reply


Terms & ConditionsCookie settings