It's very common to see the "back to top" button on many websites, but it's not usual to see it with user-friendly design.Sometimes you might find the "back to top" button not so convenient under the following situations:
- If it's not sticky, you need more time to find this button.
- If it's sticky, it might cover some content of that page.
- Your need to move mouse cursor for a long distance in order to reach this button.
This post will provide a better design for "back to top" button, and let visitors scroll to top easily.
(pic from: pixabay.com)
I. User-Friendly Designs
1. Location
No matter if the "back to top" button is sticky or not, normally it locates at the bottom right corner of many websites, which is far from visitors' mouse cursor.
According to studies, when our eyes stare at the screen, we usually focus on the middle (1/2) part of the screen in horizontal direction, while the mouse cursor will stay around 2/3 position of the screen.
Therefore, in order to let visitors click the "back to top" button conveniently, it's recommended to make this button sticky at the location around 1/2 ~ 2/3 of the screen.
2. Transparency
No matter which position you decide to put this button, it might cover a part of the contents or texts in the page. For not to disturb visitors' reading, we could set the transparency for this button.
3. When to display
If visitors don't scroll down the screen yet, it's not necessary use "back to top" button. This means, such button looks ridiculous if visitors just start to browse your website.
Therefore, it's best to display this button after visitors has scrolled down the screen for a little distance.
4. Animation
By default effect of "scroll to top" button, when clicking it, the location of the page JUMP to top immediately, which looks too rude.
After adding jQuery animation effect, the screen will be scrolled to top of page smoothly, which looks elegant.
II. Installation
If you use Blogger and this is your time to install my widgets, before editing the template, it's recommended to read 「How to backup Blogger template」in advance.
1. Please follow the steps below:
- Go To Blogger Dashboard → Template → Edit HTML
- Click into template area → Press Ctrl-F to find the string
</head> - Paste the following code just before this line:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>Please refer to "The Tips on How to Link to JQuery Files" and check if you've installed jQuery in your Blogger template. If so, just remove above codes. If you're not sure, then keep these codes.
2. Still in Blogger template, please find the string
If using the default value for parameters, just save it then you can enjoy this widget.
If you would like to modify the default values, please refer to the alphabetical character above:
G: If you would like to use custom image for this button, please replace the blue text with your image url.
H: The red number "1/2" means this button will stay in the middle (1/2) position of the screen. It's recommended to use the number between 1/2 ~ 2/3.
I: The green number set the distance to the right boundary in px.
J: The green number set the transparency of the button. 0 means fully transparent, 1 means not transparent.
K: The green number set speed for scrolling. 500 means it takes 0.5 second to scroll to top, 1000 means 1 second.
If you;re familiar with javascript, as the source code of this tool is open, just modify it as desired.
No comments:
Post a Comment