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.
This plugin works with mootools 1.1x that is included in Joomla 1.5 and it is compatible with every browser, even with IE 6!
DEMO
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.
- 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-right: distance to the right border of the window
- Position-bottom: distance to the bottom border of the window
- Background-image: use a background image for the button or text only
- 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
- Background-color (hover): use a separate background color when hovering over the button
- Fade-duration: define the time in milliseconds the button needs to fade in and out (1000 = 1 second)
- Fade-position: define the amount of pixels you need to scroll down for the button to fade in or out
- Button transparency: define a transparency for the button (1=no transparency, 0.5 = 50%)
- Display in backend: select yes if you want to display the button in the administrator interface.
Please don't forget to vote
here if you like J2Top better than the other options out there. :)
