EverWeb Codebox logo

EverWeb Widgetbox 3

Scroll To Fix Link & Anchor

Touch Scroll Fix Widget
Touch Scroll Fix Widget

Image Hyperlink or Smooth Scrolling Anchor

This widget creates an image link which can be configured as internal or external with new window option or a smooth scrolling link to anchor.
The image, with optional caption, can be allowed to scroll to the top of the page and then stick at a preset distance from the top.
To indicate the hover state, the image can have a change of opacity and/or box shadow radius and color.
Several of these widgets can be grouped to create a navigation menu as shown in the example below.
NOTE: The "scroll to stick" function will only work on the full version of the site.

Widget Settings

Choose the image and adjust the size using the drag handles or the Metrics inspector.
The radius controls are for setting the box shadow to the image rather than the rectangular container.
If the image is rectangular with rounded corners, the corner radius can be adjusted to fit. If the image is circular, ignore the radius control and check the "Circle" box.
Set the box shadow radius and color if required.
Set a contrating hover box shadow if required.
The image opacity can be varied on hover either by reducing the value for "Opacity" on the image or the image in the hover state.

Scroll Fix Link Widget

Caption

Check the box to add a caption if required.
Enter the text and use the HTML line break <br> to create a return if required.
Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size and color.
The value for "Padding" is used to adjust the vertical distance of the caption from the image.
Adjust the line height to a suitable value if the caption runs to two or more lines.

Hyperlink

To create the image as an internal hyperlink, select the "Link to:" page.
For an external link, check the box and enter the URL.
Either type of link can be opened in a new window by checking the box.

Smooth Scrolling Anchor

To create the image as a smooth scrolling anchor, ignore the link settings and check the "Anchor Link" box.
Enter the ID number which must be the same as the corresponding anchor widget.
Set the scroll time in seconds.

Fix On Scroll

To fix the item to the top on scroll, check the box and enter the distance from the top of the browser window at which the link should stop and be fixed.
Use the "Arrange" menu or the Metrics inspector to set the widgets to "Always On Top" or bring them to the front after all the other items have been inserted.

Creating Anchors

Drag the Touch Scroll Fix Anchor widget onto the design canvas. It appears as a 20px square.
Select it and set it to "Allow free dragging" in the Metrics inspector.
Drag the widget out of the way into the browser background and down to the point at which the link should smooth scroll to.
Enter the ID number which must be the same as that entered into the corresponding link.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …

This widget is included in the Touch Navigation widget pack.

Scroll
Anchor
External
Link
Internal
Link