wow - thanks!!

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

Thanks for the love, Dan!

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

Will do, Mahajan! 🙂

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!

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!

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!

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.

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

I forgot to change one of the ID, now it works.

Thanks so much! 🙂

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

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 🙂

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

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!

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.

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?

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.

@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!

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

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?

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

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

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

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?

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.