EverWeb Widgets HTML5

This is the bottom of the page!

Sticky Scroll To The Top Button

Sticky smooth scroll top button

Animation & Position

The back to the top button uses smooth scrolling and fade in/out animation.
The button only appears once the visitor starts to scroll a certain distance whcih can be adjust to suit the circumstances.
The button sticks to the bottom of the page and can be positioned left or right. The horizontal distance from the left or right edge and the distance up from the bottom is also adjustable.
The time that the content takes to smooth scroll to the top is adjustable so that it can be varied for different page content heights.

Widget Settings

Sticky Smooth Scroll Top Button widget
Sticky Go Top Button

Widget Settings

Drag the widget onto the page and enter the button text.
Enter the font family and check the box if it is Google hosted.
Select a suitable web safe fallback font.
Set the button font size color and background color.
Select whether the button is to be positioned on the left or right of the browser window.
Set the horizontal offset of the button from the browser window edge.
Set the vertical offset from the browser window bottom.
Enter scroll amount which is the distance down the page that the visitor will scroll before the button appears.
Set the button fade in/fade out animation time.
Set the scroll to the top time. Adjust this time in relation to the page content height.
NOTE: These times are expressed in tenths of a second.

Widget Position

The widget appears on the page as an empty box. The widget settings are adjusted "blind" and the finished result can be seen in Preview mode or by publishing to a local folder.
The widget size and position on the EverWeb design canvas is immaterial since it uses absolute positioning.
Drag the widget anywhere out of the way or command drag it into the footer. Alternatively, select the widget, open the Metrics inspector and check the box next to "Allow free dragging". Then the widget can be dragged off the page content area into the browser background out of the way of all other content.
Scroll on down the page to test out the button.

Get The Widget