EverWeb version 2.6 introduces a great new feature, Scroll Position, which allows you to hyperlink an object such as a button, text or image to any location on any page in your website. For example, you could set up three buttons on a page, each button taking you to a different paragraph on the same page, or set up a ‘Back to Top’ text link at the bottom of your page to smooth scroll back to the top of the page. There are many case uses for this feature!
Using Scroll Position
There are two ways to set the Scroll Position, either by the Scroll Position button in the Toolbar, or by using the Insert -> Scroll Position menu option.
When you add a Scroll Position, a horizontal turquoise line is added to the page across the Editor Window. The currently selected Scroll Position line appears turquoise, otherwise the lines appear dark blue. Notice that the Scroll Position line does not have any selection handles as it is a different type of object to those that do have selection handles.
Once you have added a Scroll Position you will want to move it to where you want it on the page e.g. at the top of a paragraph. To do this, simply click and drag the line up and down the page as required. Release the mouse button when finished with positioning.
Naming Scroll Position Lines
If you are using more than one Scroll Position on your page, it is a good idea to name each Scroll Position. This makes things easier when hyperlinking the Scroll Position to an object. Each Scroll Position is identified by the number of pixels it is down from the top of the page, so adding a user friendly name will help save time especially if you have many Scroll Positions on your page. To name a Scroll Position, first make sure it is selected, then go to the Widget Settings in the Inspector Window. Enter the name you want. You can change the name later if you want.
Hyperlinking To The Scroll Position
Once you have the Scroll Position in the place you want it you will need to link it to an object. For example, you may have set up a button at the top of the page that when pressed takes you to a Scroll Position further down the page, such as a specific paragraph. To do this:
- Click on the text label inside the button at the top of the page.
- Next go to the Hyperlinks Inspector.
- Tick the checkbox to ‘Enable as Hyperlink’.
- Make sure that the ‘Link To’ drop down is set as ‘One of My Pages’.
- In the drop down for ‘Page’ select the page that you are currently on as this is where your Scroll Position is.
- For ‘Position’ click on the drop down arrows and change ‘Top of Page’ to your Scroll Position location.
- The button and the Scroll Position are now linked.
When you have set up the link, Preview to test the button. When you press the button, the page should smooth scroll to the Scroll Position.
Relocating and Removing Scroll Position Lines
To relocate a Scroll Position to another location, simply click on the Scroll Position line and drag it to its new location. If you need to delete a Scroll Position line, click on the line so that it changes from dark blue to turquoise then press the delete (backspace) key on the keyboard.
To watch a video walkthrough of this blog post check out our “EverWeb’s Scroll Position Feature” YouTube video.
If you have any questions about this post, please do let us know in the Comments Section below, we’re happy to help!
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
Twitter handle @ragesw