Adding anchor links to your website

Your church website may contain webpages that are quite long and require a lot of scrolling down the page. If all that information has to go on one page then it may be suitable to create anchor links within the page.

Anchor links are an easy way for website visitors to find their way around the page as they allow users to jump to a certain section rather than scrolling all the way down or up. Anchor links are commonly used for visitors to return to the top of the page.

Click on the following link to see an example of an anchor link.

Example anchor link

Adding anchor links to your church website

NOTE: If you have a Church Edit website then view the Church Edit tutorial instead.

First of all decide where you want users to be able to go to in the page. For each of these sections you will need to create an anchor link, each with a unique name.

To add a new anchor link enter the following HTML code at the start of the section that you would like someone to go to (replace paragraph1 with the name of your anchor):

Now that the anchor has been added to the page you can link to it by adding the following code (replace paragraph1 with the name of the anchor):

Go to Paragraph 1

Return to top of the page

Adding anchor links with Church Edit

If you are a Church Edit user then adding anchor links to your website is easy.

1) Create your anchor link by clicking on the Insert Anchor button in the Web Editor
Inserting an Anchor Link with Church Edit

2) In the popup box that appears type the name of your anchor (ie paragraph1)
Inserting a anchor link

3) Press OK - you will see a symbol appear in the web editor showing where the anchor is located

4) Now we need to create a link to this anchor so place your cursor where the link should appear (ie top of the page) and then click on the insert link button
Inserting a link into the church webpage

5) In the insert Link popup that appears enter hash(#) followed by the name of the anchor you just created
Inserting a link

6) Press ok and repeat these steps for any additional anchor links for the page

Go to top of the page

 

 

 

 

 

 

 

 

 

Anchor Links - example

Clicking on the link at the top of the page has taken the page down to this part.

To return to the top of the page click the link below

Return to top