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

  • 4 February 2016
  • 32 replies
  • 1504 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

A

wow - thanks!!

D

Yup - this is a win. Nice work. I just need more features like this added into the Unbounce Editor faster! Great job though. Thanks 🙂

J

Thanks for the love, Dan!

Mahajan

That’s awesome. Keep on adding the stuff like this and help the community to make better Landing pages

J

Will do, Mahajan! 🙂

K

Thanks so much for this. It’s great!

The only issue I am having is the responsiveness. The button gets cut off on the phone.
Is there a way to fix it?

Thanks!

E

Can the [back to top] button be shown on RWD only?  I would like to make it invisible on desktop, but the visibility function does not work.  How can i set it up??

Thank you!

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!

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 forgot to change one of the ID, now it works.
Thanks so much! 🙂

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

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 🙂

Kenji_Sano

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

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!

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.

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

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!

Raj_Abramov

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

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?

L

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

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

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

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?

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.

Reply


Terms & ConditionsCookie settings