Ask a Question ?
Design & Publish Websites Faster

Navigate Through Sections of the Same Page

In this post we’ll show you how to use anchor tags to navigate through different sections of the same (single) page.

This way, if you have a page with a lot of content that’s divided into sections, you’ll be able to click the navigation links and they’ll take you to a specific section in that page.

The Navigation App

After you’ve finished your page, you’ll need to install a new version of the Navigation app somewhere where the users can find it easily (like at the top of the page). Add an entry for every section in your page and change its name so it makes sense. (If the name of the section is Photos, the link can be named “photos” too).

Note: if you have several pages in your site, this navigation app should be different than the one you’re using to link the pages together.

The Embed HTML App

Next, go to a section and at the very beginning, install an Embed HTML app (by dragging its “Install New” button from the “Apps” menu in the shelf). You’ll have a visual reference in the image below.

Click the pencil icon (or double click the app itself) on the embed app so the “Edit Content” panel opens up.

Embed App

The embed app “Edit” Content button

The Code

In the panel that’ll open up, paste this code: <div id=”section”></div> in the “Embed code” field.

Embed App

Red arrow points to the name of the section to be linked, showing “photos” here.

Be sure to replace the “section” portion of the code with the name of the section you want to link. For example, if the section you want to link is named Photos, your code should look something like this: <div id=”photos”></div>. Hit “Save” and then “Close”. Remember that the code is case-sensitive. Try using only small caps.

After you do this, you won’t be able to see your embed app. But don’t worry, that’s what’s supposed to happen.

Go back to your navigation app and select the respective entry for the section you want to link. In this case, the “Photos” entry. Click on the link icon in the editor to open its settings. Then, in the new box that’ll pop up, select URL.

The Tag

There you’ll need to paste the following tag (and, once again, replace the “section” portion of it): #section. For this example, the end result will be: #photos

Be sure to write it exactly as you included it in the embed app code and to select the “Same Window” option so the links opens up in the same page.

Link It

See how the URL field shows #photos the same way that the embed app shows “photos”, name is the same, but using the # symbol instead of quotation marks.

And We’re Done!

Cool trick, huh? Try it out and see how you like it! And better yet, check this article about adding smooth scrolling to get an awesome effect!

If you have any questions or comments, please, don’t hesitate in sharing them!

Menu