Creating and using page anchors in SharePoint Online involves a few steps, but it's a straightforward process that can significantly improve navigation on long pages. Here's a comprehensive guide:
1. Creating the Anchor (Target Location):
- Edit the Page:
- Navigate to the SharePoint page where you want to add the anchor.
- Click "Edit" in the top right corner.
- Insert a Code Snippet
Using a Code Snippet
- Choose the location on the page where you want the anchor to be.
- Add a "Code snippet" web part. You can search for it in the web part toolbox.
- In the code snippet web part, insert an HTML <div> or <span> tag with an id attribute. This id will be your anchor's name.
Example: <div id="section1"></div>
Replace "section1" with a descriptive name for your anchor (e.g., "top-of-page", "resources", "faq"). - If you wish to add some space above the anchor, you can add a style attribute to the div. Example: <div id="section1" style="padding-top: 100px;"></div>
Creating the Link to the Anchor:
- Edit the Page (or Another Page):
- Navigate to the page where you want to create the link. This can be the same page or a different SharePoint page.
- Click "Edit."
- Create the Link:Select the text or image you want to use as the link.
- Click the "Link" icon (it looks like a chain link).
Example: #section1 - Save and Publish:
Descriptive Anchor IDs: Use clear and descriptive id names for your anchors. This makes them easier to remember and manage.
Consistency: Maintain a consistent naming convention for your anchors.
Test Your Links: Always test your anchor links after publishing to ensure they work correctly.
Avoid Spaces in IDs: Use hyphens (-) or underscores (_) instead of spaces in your anchor IDs.
Table of Contents: For long pages, consider creating a table of contents at the top with links to the different anchor sections.
Accessibility: Ensure your anchor links are accessible to users with disabilities. Use descriptive link text and ensure the page structure is logical.