Mac SEO Blog

EverWeb’s Hyperlink to Current Page feature gives you an easy way to add a ‘Go to Top’ of page function to your Master Page and you can also it with Scroll Position in your Master Pages!

Many websites use a long form page format style. This style of page is particularly useful on mobile devices where it is often preferable to scroll up and down a long page rather than clicking back and forth to different pages. This page style, therefore, makes a ‘Go to Top’ of page feature a good idea to implement. Your visitors can quickly jump back to the top of the page. 

You can add a Go To Top of page feature on a page by page basis which is what you have to do if you are using any version of EverWeb up to version 3.3. EverWeb version 3,4 adds the new Hyperlink to Current page feature which means that you can now add a Go to Top feature within your Master Pages which will save you lots of time and effort.

Adding a Go To Top of Page Feature

1. First go to your Master Page and add your ‘Go to Top’ of page icon, image or TextBox. In this example, the Master Page has a responsive page layout. It is, therefore, a good idea to place the Go to Top TextBox in a Responsive Row widget within the Footer area. If you are using a Centered Page Layout, add the TextBox button directly in to the Footer area.
2. Once you have added your own Go to Top object, keep it selected and go to the Hyperlinks Inspector. Click on the checkbox to ‘Enable as Hyperlink’. This will make all of the Hyperlink options available to the object.
3. Set ‘Link to’ as ‘One of my pages’, set ‘Behaviour’ to ‘Default’ and set the ‘Page’ field to ‘Current’.
4. You have now finished the set up of the Go to Top featue.

Attach the Master Page to a regular page, if you have not done so already, then preview or publish your site to test. Any page that uses the Master Page will now include the Go to Top of page button.

Using Scroll Position with Hyperlink to Current Page

As mentioned above, you can also use Hyperlink to Current Page with Scroll Position in a Master Page.

1. If you have not done so already, create a Master Page. In this example, the Master Page will have a Responsive Page Layout.
2. Remove any unwanted objects from the Master Page. In my example, my Theme Template contains a Full Width Navigation which I will keep and place at the top of the page.
3. Next, add a Responsive Row widget to the page, below the Navigation Menu widget.
4. With the Responsive Row widget still selected, add a TextBox button to the Responsive Row. In my example I have added the text ‘Contact’ to the button. When the ‘Contact’ button is pressed, the page will scroll down to the Contact section of the page.
5. Add a Contact Section to the Footer area of the page containing information that is to appear on all of the pages of my site.
6. The page structure is now complete. The Contact button in its responsive row and the full width Navigation Menu widget form the ‘header’ of the Master Page.
7. There is nothing below the ‘header’ until the Footer area. This area will be where content is inserted when the Master Page is attached to a regular page.
8. Set the Minimum Content Height of the Master Page to 500 pixels.
9. The ‘header’ and Footer area sections are now adjacent to each other. This is not a problem because when you add content to your regular page (with the Master Page attached), a gap will open up between these sections to allow for content to be added. Remember that the Content Height setting is a minimum setting and expands as you add content as needed.
10. To create a hyperlink to my Contact section of the Master Page, go to the Contact section of the page. This is where we are going to create a Scroll Position.
11. Click in the Contact section to select it, then click on Scroll Position in the Toolbar and choose the ‘Set Shape As Scroll Position’ option. Name the Scroll Position ‘Contact’ then click OK to finish.
12. Now go to the Contact button at the top of the page to attach the hyperlink. Double click on the word ‘Contact’ to select the text.
13. Go to the Hyperlinks Inspector and click on the checkbox to ‘Enable as Hyperlink’. In this example, set ‘Link To’ as ‘One of My Pages’, the ‘Page’ field to ‘Current’ and set ‘Position’ to ‘Contact’. The Position field is used for Scroll Position names on the page.
14. The set up is now complete.

Now create a blank page, or use an already existing page, and attach the Master Page to it.

In this example, the page appears to have no content in it. If you drop a Responsive Row widget on to the page, for example, the widget will be placed between the ‘header’ section (i.e. the Navigation Menu widget and the button responsive row) and the Footer area.

One the content that you want has been added, preview the page to test the Contact button.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter

Instagram