J2Top creates a button that appears on the bottom-right (or -left) when you scroll down the page. Once clicked the page will scroll smoothly to the top of the page and the button will disappear. The look of the button is fully configurable from the backend,
you can change the text, font-color, font-size, background images and much more.
As of version 1.0.8 the button text can be translated in the plugin configuration or by using language files. Additionally we added an option to display the button also in the administrator interface.
You can also define how much pixels must be scrolled down before the button appears, the time that the button needs to fade in and out and if the button should be transparent by setting the opacity between 0.1 and 1.
Installation
To install the plugin you have to follow these few steps:
- Login to the Joomla! backend and click on Extensions - Install/Uninstall.
- Select the plugin file that you downloaded to your harddisk and click Upload File & Install.
- After it installed successfully click on Extensions - Plugin Manager and select System - J2top from the list.
- On the J2top configuration page select 'Enabled - Yes' on the left side of the page and click Apply.
- Go to your frontpage and refresh it. If you scroll down you will see the go to top button appear on the bottom right. If you want you can modify the appearance of the button on the plugin configuration page you have opened in the backend.
Settings
- Text: define the text that appears on the button
- Text-size: define the text-size
- Text-color: define the text-color
- Text-color (hover): define the text-color when hovering with the mouse over the button
- Width: the width of the button
- Height: the height of the button
- Padding: use this to move the text inside the button
- Position: place the button on the left or right side of the window.
- Border distance: distance to the left/right border of the window
- bottom distance: distance to the bottom border of the window
- Background image: use a background image for the button or text only.
- (Below you can select an existing image from the /images folder in your Joomla root directory.)
- Background color: use a background color (appears behind the image if used)
- Background image (hover): use a separate image when hovering over the button with the mouse.
- (Below you can select an existing image from the /images folder in your Joomla root directory.)
- Background color (hover): use a separate background color when hovering over the button
- Fade position: define the amount of pixels you need to scroll down for the button to fade in or out.
- Fade duration: define the time in milliseconds the button needs to fade in and out (1000 = 1 second).
- Scroll speed: define how much time the scroll animation will take (1000 = 1 second).
- Display in backend: select yes if you want to display the button in the administrator interface.