Skip to main content

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!

Yes, that is correct!

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?

Yes, same issue

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.

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

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

 

Thank you! It worked with the lightboxes!

Reply


Terms & ConditionsCookie settings