Video Transcript:

EverWeb’s Scroll Position feature (available in EverWeb version 2.6 or higher) lets you hyperlink an object such as a piece of text, a shape or an image, to a specific position on any page in your website, even the page that includes the hyperlink!

This is an incredibly powerful tool for your website. as you can now easily take your visitors to any location on any page with a mouse click. It’s such a great feature that we added it to the Toolbar!

Let’s have a look at how Scroll Position works…

In my example when the ‘Testimonials’ button on my page is clicked I want to be taken directly to the Testimonials section further down the page.

To do this I need to set a position to scroll to on my page, which is sometimes known as an ‘Anchor’.

There are two ways to set the scroll position, either by using the Scroll Position button in the Toolbar, or by using the Insert, Scroll Position menu option.

When you add a scroll position you’ll see a dark blue line added across your page. When you click on the line it changes to a light blue color to show it is selected.

Notice that the scroll position line has a unique name shown in the widget settings. You can customise this as you wish with a name of your own. The number at the end represents the number of pixels down the page the scroll position is currently at. Remember that zero horizontal is the top of the page.

With the scroll position added, you can move it to where you want it located, in our example to the top of the Testimonials section. To do this, simply click and drag the line to where you want it on the page. Release the mouse button when finished.

Once you have the scroll position in the place you want it, link it to an object. In our example the ‘Testimonials’ button at the top of the page.

First highlight the word ‘Testimonials’ inside the button. Next go to the Hyperlinks Inspector and tick the ‘Enable Hyperlinks’ checkbox. Make sure that the ‘Link To’ field is set to ‘One of My Pages’ and that in the ‘Page’ field you have the current page selected as this is where your scroll position anchor is located. In the ‘Position’ field, click on the drop down and you will see the name of our scroll position. Select the scroll position. The button and scroll position are now linked so

Preview the page and click the button. You will  smooth scroll to the Testimonials section.

In the next example, we’re going to set scroll positions to link to the three buttons at the bottom of the page.

As we already have a scroll position for Testimonials, we only need to add two more scroll positions for the Ethics and About sections.

Again, click on the scroll position button in the toolbar to add a new scroll position. This time I’m going to move it to just above the Home/About text.

The third scroll position I add will be moved to the just above the Ethics & Compliance section.

When you hyperlink each of the buttons, you will see the unique name of each scroll position line so you can select the one you want to use.

Once again, use Preview to see the results. Notice that clicking the bottom Testimonials button has little effect as the section is very close to the button.

In the last example, let’s link the Testimonials button on the Home page to the Testimonials section on the About Us page.

Follow the same procedure as before, but this time select the About Us page as the Page you want to Hyperlink to.

Then Select in the Position dropdown, select  the bottom scroll position in the list. Use Preview to see the scroll position in action!