Use Scroll Position in EverWeb To Get To The Right Place On The Page!

One of the most thoughtful things you can do for your site’s visitors is to make their interaction with it as user friendly as possible. This is especially true if your page is text or content heavy and your visitor has to do a lot of scrolling to get to the part of the page that they are interested in. On mobile devices this problem can become critical when too much page scrolling frustrates your visitor and they decide to click elsewhere instead of persevering.

There are obviously a number of solutions to this kind of problem in EverWeb, e.g. you could redesign your page to be more mobile friendly or put some of the page’s content on another page and hyperlink to it. Sometimes though, it’s just not easy, convenient, practical or sensible to do this. If this is the situation you find yourself in, EverWeb’s Scroll Position feature may be the best solution for you!

Designing Your Page? Anchor’s Aweigh!
The term ‘Anchor’s Aweigh’ comes from the nautical expression where a ship pulls up its anchor to get under way. Website deign borrows this term for its own use. In our page design, we can ‘drop an anchor’ wherever we want to on a page. We can still roam about the page even though we are still tethered to the anchor point. When ready, we can instantly return to the anchor point. In naval terms that would mean pulling on the rope attached to the anchor in order to get back to it. In EverWeb, we have Scroll Position to do this for us!

Of Anchors and Scroll Positions…
Taking your visitor to one or more set points on your page is achieved by using hyperlinks, but ones that specifically take you to a particular point in the page and not to the top of the page. There are two types of Scroll Position in EverWeb: Insert Fixed Scroll Position and Set Shape as Scroll Position. The first type, Insert Fixed Scroll Position, was introduced when EverWeb was only able to create fixed width website designs. The second type, Set Shape as Scroll Position, was introduced after the debut of responsive web design in EverWeb version 2.8.

In this blog post we’re going to focus on Set Shape as Scroll Position. There are a few reasons why we recommend using this type of Scroll Position:

1. You can use Set Shape as Scroll Position on any type of web page in EverWeb, fixed width or responsive.
2. You can only use Insert Fixed Scroll Position in a fixed width website.
3. You can attach a Set Shape as Scroll Position anchor to almost any object on your page.

We also recommend that you use EverWeb 3.9.5 or higher, for macOS or Microsoft Windows as this version (or later) of EverWeb makes using Scroll Position super easy.

Creating A Set Shape as Scroll Position
in this example, we are going to place a button at the top of the page that scrolls down to some content in a TextBox further down the page. The instructions below can be applied to both a Center Aligned or Responsive page in your site.

To start, let’s create an anchor point on the page. This is where we want to scroll to when the button at the top of the page is clicked upon…

1. Before starting check the View-> Show/Hide Layout menu options to make sure that this option is toggled so that the menu list shows ‘Hide Layout’. You should see the page layout lines and symbols displayed in the Editor Window. This will also show the anchor symbol later on once we set the Scroll Position.
2. Once the layout display has been set I will first scroll down to the TextBox that I want to attach my anchor to. Click on the TextBox (or your own object you want to use) to select it.
3. Next click on the Scroll Position button in the Toolbar, or use the Insert-> Set Shape as Scroll Position menu option.
4. From the list of options, choose ‘Set Shape as Scroll Position’.
5. Once you click on the menu option a dialog box will display. Enter a unique name for the Scroll Position. Try to give a meaningful name if you have many Scroll Positions set up on your page.
6. The name that you assign has to be unique to the page, but you can reuse the name on another page if you want as Scroll Position works by using a combination of Page Name plus Scroll Position name.
7. You have now created a Scroll Position and you should see a blue anchor symbol displayed in the top right hand corner of the object that you selected.

Applying the Scroll Position
No that the anchor has been created, go to the top of the page and add a rectangle shape from the Shapes button in the Toolbar then create your button. Alternatively, you might want to use a piece of text as your hyperlink. Once you have created your button…

1. Select the text within it then click on the Hyperlinks button in the Inspector Window.
2. Click on the ‘Enable as Hyperlink checkbox to activate the settings.
3. Click on the dropdown next to ‘Page’ and either select ‘Current’ or the name of the current page.
4. Now click in the dropdown for ‘Position’. You should see your Scroll Position listed there. Select it.
5. You have now set up your hyperlink to your Scroll Position. Preview to test.

Renaming The Scroll Position
If ever you want to change the name of a Scroll Position that you have created..

1. Click on the object that contains the Scroll Position.
2. Once the object has been selected, go to the Shape Options tab and click on the Scroll Position section if it is not already open.
3. Overtype the name that is displayed with the new name that you want.
4. Press Enter to finish.

Deleting the Scroll Position
If you no longer need the Scroll Position, use the steps above for Renaming the Scroll Position, but leave the field blank. Then press Enter to finish. This will remove the Scroll Position and the blue anchor will disappear from the selected object.

Finding Your Scroll Position
If you have many Scroll Positions on your page, you may have problems finding the one you want to edit or delete. If this is the case, turn your Project’s Rulers on using the Window-> Show Rulers menu option if they are not already on. As each Scroll Position listed in the Position dropdown menu of the Hyperlinks Inspector includes its vertical location, you can easily find your Scroll Position by matching this location up with the ruler guide.

You can apply Scroll Position also in the Styled Text Editor in EverWeb’s widgets that use this editor as well as in blog posts. Making your site easier to navigate using Scroll Position is wonderfully easy, yet powerful!

If you have a question about Scroll Position, or any else related to EverWeb, please tell us in the Comments Section!