How to Create a Single-Scrolling One Page Website with Anchor Links
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.
Using Widget Anchors
- Edit or add a new Layers page
- 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.
- Click Save & Publish
- Click the Layers icon in the Customizer top bar and choose Layers Dashboard to return to your admin
Create an Anchor Menu
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.
- Go to →
- Choose a menu to Edit, or click create a new menu, give your menu a name and click Create Menu
- Expand the Links panel
- In the URL field, enter your full site URL followed by the anchor ID.
- Your URL should end in a slash. Example http://docs.layerswp.com/#layers-widget-column-23 will jump you right to the bottom of our homepage here.
- If your site will only have this one page and no internal pages. you can use just the anchor as the link URL.
- Add the Link Text (example “Our Services”) and click Add to Menu
- Repeat for your remaining IDs. Here is an example of our One Pager sections turned into anchor links:
- In the Menu Settings section below your link panels, check the Header Menu box to set this menu as your main menu.
- Click Save Menu
- 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.
Anchor Links in Widgets
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:
Finding Other IDs (Advanced)
To find the ID of any element on a page, use the Browser Inspector.
- 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.)
- 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:
- 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
- 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.
HTML: <div id="mydiv"class="divstyle">
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.
HTML: <a name="myservices"></a>
Adding Smooth Scroll
You can easily add a bit of JQuery script to add a smooth scrolling effect when using anchor links.
Did you know?
Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.