EverWeb Widgets HTML5

Sticky Scroll To The Top Arrow

Sticky smooth scroll top arrow

Animation & Position

The back to the top arrow uses smooth scrolling and fade in/out animation.
The arrow only appears once the visitor starts to scroll a certain distance which can be adjust to suit the circumstances.
The arrow 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

Set the arrow color, the background color using RGB color numbers and the background opacity.
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.

This is the bottom of the page!

Widget Settings

Sticky Smooth Scroll Top Arrow widget
Sticky Go Top Arrow

Get The Widget

The Chevron

The chevron style up arrow is created using CSS. It is inserted into the block element using the "before" pseudo element.
The chevron itself is a box with a border on only two sides. This creates an elongated L shape.
This is then turn to an appropriate angle using the CSS transform selector set to rotate.
The chevron is given absolute positioning so that it can be moved to the correct position in relation to the parent element.