EverWeb Widgetbox

Scroll Anchors
smooth scrolling anchor hyperlink widget

Smooth Scrolling Hyperlink & Anchor Widgets

Hyperlink Widget

Click the link above to see how the smooth scrolling works and then use the "Back to the Top" button to slide sedately back up here.

Anchor Widget

Drag the Anchor widget onto the page and enter the same ID as used in the hyperlink.

The widget will appear as a small rectangle as show in the screenshot to the right.

Drag this to the point on the page where the hyperlink will scroll to when clicked.

Note that the Anchor widget has a negative z-index so it will not interfere with any hyperlinks or other dynamic elements on the page.

The Hyperlink widget and the Anchor widget work together to create links which smooth scroll to any point on a page.


Drag the Hyperlink Widget onto the page

Enter the text which comes before the hyperlink

Enter the hyperlink text

Enter any text which comes after the hyperlink

Choose the font family

Enter the font size

Choose the text color and hyperlink color

Choose to underline the hyperlink if required

Enter an ID which will also be used in the Anchor

Using the drag handles, adjust the box so that there is enough height & width.

When adjusting the box width, allow some extra space. This prevents a text return in some browsers.

Anchor Target
Anchor ID
Anchor
Hyperlink
Smooth Scrolling
Smooth scrolling ANchors
smooth scrolling anchor hyperlink widget
Get The Widget