Scroll To Top & Line Spacer
This page shows three types of smooth scroll to the top of the page links and a horizontal line spacer. Click the scroll down button to get to the bottom of the page.
Scroll Top Button
The button can use a hosted font if required and has options for styling the static and hover color and background color, padding, border width, color and radius and box shadow radius and color. The background color has an opacity control and the scroll time can be set in milliseconds.
Scroll Top Chevron
This is a tab which can be round or square with radiused corners and has a chevron up icon. It has controls for setting the icon and background color and opacity, hover color and background, corner radius and scroll time in milliseconds. The button can be made round by simply checking a box.
Scroll Top Hover
This is also a chevron tab but it expands on hover to show the back to the top text. If the text content is changed, the hover width should be adjusted to suit.
All three buttons can be positioned at the bottom of the content area or command dragged into the footer.
As can be seen from both the chevron button examples, they can also be turned into sticky buttons and placed either left or right and the distance from the browser bottom and edge can be set.
Horizontal Line Spacer
The horizontal line is used on this page to space out the elevator images vertically. The widget creates a horizontal line which is automatically centered vertically in its container no matter what the height is. In this case, the widget height is set to 300px.
The line height and color can be set and the line style has options for dashed, dotted, double and solid.
As can be seen in the second example, the container can be given a background color which also has a control for adjusting the opacity.
The first line is set to full width responsive, the second one is the same but has been given an inset and the third one is set to the page content width. In this case the content width is 320px since the page is responsive down to the width of the smallest iPhone screen.