EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Anchor Link Widget

Touch Anchors

Touch Anchor Widget

Anchor Button Link

This pair of widgets create smooth scrolling anchors on a long page.
Note that it cannot be used to create links to anchors on another page of the site.
The button has various styling options.
Although the button has options for styling the hover state, this is only required if it is used on the full version of the site since hovers don't work on mobile devices.

Touch Anchor Tab Link Widget
Touch Anchor Widget

Widget Settings

Enter the button text, adjust the width using a drag handle or the Metrics inspector and the width using the value for TB (Top/Bottom) Padding.
Set the font family, size and color.
Text can run to two or more lines by using the HTML for a line break <br>
When text is aligned left (or right in Arabic or Hebrew), adjust the values for LR padding and line height.
Set the background color or check the box, choose the colors for a gradient and set the angle.
Set the border width, color and corner radius if required.
Set the box shadow color and radius if required.
If hover colors are required when the button is used on the full version of the site, check the box and set the hover and background colors.
Enter the Hyperlink ID. This must be unique and the same as the one entered into the corresponding anchor widget.


The anchor widget appears as a 10px square and only requires the ID to be inserted.
Make sure this ID is exactly the same as the one for the corresponding anchor buton.
It can be command dragged into the header or footer or positioned outside of the content area by checking the box next to "Allow free dragging" in the Metrics inspector.

This widget is included in the Touch Navigation widget pack.

Multiple Anchors

If multiple tabs are required on a very long page or a one page website, the Tab Anchors widget provides a better solutuion.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …