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

navigation
ui
design

#1

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.
**************************

Scripts Needed: 
Grab the latest back_to_top.css and back_to_top.js files here:
https://gist.github.com/noahub/f96c5c89561b0e84a868

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 back_to_top.css CSS code into your Stylesheets section

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

Step 4. Paste the back_to_top.js Javascript code in the Javascript section with placement ‘Before Body End Tag’.

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!


The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

wow - thanks!!


#3

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


#4

Thanks for the love, Dan!


#5

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


#6

Will do, Mahajan! :slight_smile:


#7

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!


#8

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!


#9

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!


#10

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.

#11

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


#12

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


#13

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 :slight_smile:


#14

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


#15

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!


#16

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.


#17

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?


#18

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.