How to Create a Single-Scrolling One Page Website with Anchor Links

FAQ  How To  Tutorials  Since: 1.0 Last Updated: Layers ver. 1.2.7 Time to Read: 5 minutes

Difficulty: Easy

Single-scrolling landing pages greatly simplify the presentation of a limited amount of information and provide quick navigation for your visitors. You’ve probably seen these kind of websites for businesses, design agencies, resumes and non-profits. The intent of a single-scrolling page is to offer brief, eye-catching information that is easy for visitors to scan, with a minimal amount of clicking through to other pages. This tutorial starts out with the “One Pager” preset and will walk you through how to create custom anchors using the widget’s Advanced option to set jump links in your main menu. At he end of the article I provide some quick tips on how you can use anchor links in your widgets, such as Slider and Content Widget buttons.

  1. Edit or add a new Layers page
  2. In each widget, you must now set a custom anchor. This anchor is used at the end of your page URL to tell the browser to scroll directly to that spot on the page.
    • Click the Advanced button in the widget Design Bar
    • Enter a Custom Anchor – Anchors should not start with a hash symbol
    • Anchors should be lower-case, simple, and hyphenated if more than one word (similar to a permalink slug).
    • Example, if your widget is displaying posts your anchor might be “latestnews” or ‘latest-news”.  Write these down since you will need them for your menu.
      • cusotmanchor
  3. Click Save & Publish
  4. Click the Layers icon in the Customizer top bar and choose Layers Dashboard to return to your admin

Anchor links are links which target a specific element on a page. When the link is followed, the browser will load the page and scroll it automatically to the beginning of that element. You see it in action right here on our docs when navigating in articles with the left sidebar links.

To target elements in this way, you can use and ID or a Name. Every Layers widget, and most 3rd Party widgets, receive a unique ID when they are placed in the widget areas and saved, which you can see using your Browser Inspector or the Advanced option in the widget. Our Custom Anchor allows you to create a name  attribute that can be used in the same way and is more semantic.

  1. Go to  Appearance  → Menus
  2. Choose a menu to Edit, or click create a new menu, give your menu a name and click Create Menu
  3. Expand the Links panel
  4. In the URL field, enter your full site URL followed by the anchor ID.
  5. If your site will only have this one page and no internal pages. you can use just the anchor as the link URL.
    • anchor-links-hash
  6. Add the Link Text (example “Our Services”) and click Add to Menu
  7. Repeat for your remaining IDs. Here is an example of our One Pager sections turned into anchor links:
    • anchor-links-menu
  8. In the Menu Settings section below your link panels, check the Header Menu box to set this menu as your main menu.
  9. Click Save Menu
  10. Return to your page view tab in the browser and refresh the page. You should now see your anchor links in the main menu. When you click each one, it will scroll immediately to the targeted section.

You can also use anchor links in your builder widgets, such as a Slider or Content Widget button, to get the link to jump to another location on the page. To do this, use the same technique to add the Anchor to the link URL in the widget’s Button Link field like so:

Limitations

You cannot use anchor links on Slider buttons to jump from one slide to the next. This is because the nature of the slider requires javascript to perform the sliding, which is not triggered on a normal link.

To find the ID of any element on a page, use the Browser Inspector.

  1. Right-click on the element you want to scroll to and choose choose Inspect Element
    • The browser inspector is a default part of webkit browsers such as Chrome, Firefox and Opera. If you are using Safari, see this guide to quickly enable it. IE users should switch to a webkit browser for this exercise (and for your own mental health.)
  2. In your inspector panel, you can see the HTML for your page in a condensed format. You will neeed to locate the HTML tag for your element, or the one right above it. Example:
    • The widget area of a Layers page always begins with the <section id="wrapper-content">
    • Each widget is inside this wrapper-content section,  and begins with <section class="widget"
    • Each widget section will have the ID at the end of the tag as seen below:
    • anchors
  3. In our One Pager preset, we have four widgets under the top Slider by default. The first content widget as an ID of layers-widget-column-6 , the next one is layers-widget-column-7 and so on, as seen above. These may not always be sequential, as seen in our example, where the Contact & Maps widget received an ID of layers-widget-map-6
  4. Copy the first ID (or memorize it). If you double-left-click on it with your mouse, it will automatically highlight just the ID for you so you can Ctrl+C/Cmd+C

What is the difference between an ID and a named anchor?

Each widget has an ID, which is a unique identifier for the browser when rendering the page content. Because this ID is unique, it can be used in your URLs to scroll to where the ID exists in the page.  IDs can be used in any HTML element.

Example

HTML: <div id="mydiv"class="divstyle">

ID: #mydiv

 

A named anchor is used specifically in combination with a link element. It can also be used in URLs to scroll to a specific element, but requires the original element to have the name attribute and is not unique. In terms of programming, IDs are not really cusotmizable. Names are. The downside of named anchors is if the targeted element is not supposed to be a link (ie you don’t want the titles of your widgets to be links that do nothing) it requires an empty link element.

Example

HTML: <a name="myservices"></a>

Anchor: #myservices

 

You can easily add a bit of JQuery script to add a smooth scrolling effect when using anchor links.

See How to Add Smooth Scrolling for Anchor Links