Back to Top﻿

Back to Top

6/14/2016

If you have visited a few of the longer pages of my site, you've probably noticed that as you scroll down a tiny button appears in the lower right corner(the arrow button) that when clicked, will scroll you back up to the top of the page you are on.

It is called the 'Back to Top' App. If you haven't seen it before, it can be found on this page by scrolling down slightly. For those of you who are Weebly users, it's an element that I have added to the blog sidebar so it appears on the blog page, and every blog post.

It looks something like this:

As you can see from the screenshot above and the button I have on my page, the Back to Top button can be customized. Currently there are 40 different arrow types that you can use, but it's also got a number of other features as well.

Here are a list of Features:

40 Different Arrows
4 Possible Button Types
Control Button Size
Control Button Alignment (Right, Center or Left)
Padding from Bottom and Right or Left Side
Percent from Bottom
Button Color and Button Hover Color
Button Border Type, Color, Hover Color and Border Size Settings
Button Opacity and Button Opacity Hover Settings
Button z-index Settings
Arrow Color and Arrow Hover Color
Control when Button Shows, when it Fades In and Out and Scroll Speed

I think that I should be quick to point out, for my fellow Weebly friends, the element can easily be added to any page of your site (I usually add the 'Element' at the very top of the page so it's easy to find in the Weebly editor). When adding the element to a blog page, you would want to add it to the sidebar. If you wanted the arrow to appear on every page of your website, the easiest thing to do would be to add it to the Footer.

You can view a demo here:
https://www.ip-approval.com/weebly/back-to-top/arrows/
(note: the demo does not include all of the features) Things like; Positioning the Button, the Hover colors, Control when Button Shows, when it Fades In and Out and Scroll Speed are not demoed.

Back to Top Element
$5.00