Unbounce: How to Add a "Smart" Back-to-Top Arrow

If you want to try out Unbounce yourself for free for 14 days and then get 20% off for the next 3 months after the 1-month free trial, sign up using my link:

https://unbounce.grsm.io/ivan?sid=u-backarrow-1

Community post with the code as shown in the video: https://community.unbounce.com/t/how-to-add-a-smart-back-to-top-button/3294

My Unbounce playlist so you can find every important piece you need: https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the ‘My Services’ section of my blog: https://amarketingessentials.com/my-services/

Hey all!

In this video, I show you how to add a “back-to-top” arrow to your Unbounce landing page.

It doesn’t even have to be an arrow – it can be anything you want at all, but in general on websites, you would usually see an arrow in the bottom-right of the screen, so that’s what people are used to.

So here is what you need to do to make it happen:

(1) Add an “image” element to your Unbounce page. You can use an existing image from the Unbounce library, or just use an image that you saved from somewhere else – it doesn’t really matter.

Please this image ANYWHERE on the page.

That’s right – it does NOT have to be in the bottom-right of the page, and can be anywhere.

Once we add the correct code to our page, the button location will automatically be adjusted and pinned to the bottom-right corner of the page.

(2) Using the community post URL provided above, copy the STYLE sheet into the style sheet section of your Unbounce page, and copy the JavaScript code into the JavaScript section of the Unbounce page.

Make sure to add the names for the new style sheet and JavaScript that you added, since if you’ll be adding new codes later on, you want to make sure that you stay as organized as possible.

Also, make sure to set the JavaScript before the ending body tag.

(3) Copy the element ID of the image/arrow that you added by clicking on it and then copying the ID in the bottom-right of the element edit bar.

It should say something like “#lp-xxx-xxx”.

Copy that entire string and go back into the style sheet, and replace the element ID there with this new one.

Do the same for the JavaScript code as well.

And that’s really all there is to it.

Save the page, publish it, and take a look for yourself to see what your Unbounce page will look like.

The new JavaScript that you added MIGHT conflict with other code that you have, so it’s good to just make sure it’s working correctly, but most of the time it will without any issues.

And that’s it!

Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

Thanks for watching, and I’ll see you in the next video!

source