How to Create an Anchor Link That Opens Specific Content on a SharePoint Page

Share a direct link that is anchored to a specific Section or Design Element on your SharePoint page by following the steps outlined in this solution article.

TABLE OF CONTENTS

• Prerequisites
• Set Up a URL You Can Share That Redirects to a Section or Design Element on Your Page
  • Step 1: Identify the Section or Design Element
  • Step 2: Insert a Code Design Element
  • Step 3: Copy and paste the JavaScript code
  • Step 4: Save and Republish
  • Step 5: Share your link

Prerequisites

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Set Up a URL You Can Share That Redirects to a Section or Design Element on Your Page

Here are the steps you can follow to create an anchor link:

Step 1: Identify the Section or Design Element

Make the Section or Design Element you want your users to be redirected to identifiable by entering an ID name. To do this

• Open the settings of the Section of Design Element
• Go to the Custom CSS tab
• Add a unique name in the ID field
• Update the Design Element

Note: Make sure you use unique ID names for different Sections or Design Elements within the same page.

In this interactive tutorial, you can see these steps in action

Step 2: Insert a Code Design Element

Add a Code Design Element to any part of the page. To do this

• Edit your page
• Select the ShortPoint web part and press the pencil icon
• Click the Add Design Element button on any part of the page (the Code Design Element will not be visible to your users when we are done)
• Search and press the Code Design Element option

Find out how to insert a Code Design Element in the interactive tutorial below

Step 3: Copy and paste the JavaScript code

This JavaScipt code will be needed to automatically redirect your users to the designated content of your page:

(function() {
    let i = 0;
    
    function scrollIntoView() {    
        i++;
        let hash = window.location.hash;
        if (typeof (hash) == 'string' && hash.includes('#')) {
            let elem = document.getElementById(hash.substring(1));
            if (elem != null) {
                clearInterval(myInterval);
                elem.scrollIntoView({
                    block: 'center',
                    behavior: 'smooth'
                });
            }
            if (i === 300) 
                clearInterval(myInterval);
        }
    }
    
    let myInterval = setInterval(scrollIntoView, 2000)
})()

Insert this code by doing the following

• Copy the code
• Paste the copied code in the JavaScript field
• Switch to the Design tab
• Disable the Sandbox mode
• Press the checkmark button

Click Get Started to see how the steps are completed in this interactive tutorial

Step 4: Save and Republish

Ensure that you hit Save and republish your page.

Step 5: Share the anchor link

Create the anchor link by adding the Section or Design Element ID name to the end of your page URL with a hashtag following this format:

https://<page URL>#<IDName>

In our example, the URL we will share is:

https://3rqny2.sharepoint.com/sites/Intranet#scrollHere

Where:

• Page URL is https://3rqny2.sharepoint.com/sites/Intranet
• # is the symbol for a hashtag
• ID Name is scrollHere

You now have a shareable URL you can provide your users to direct them to an exact portion of your intranet page. 

Related articles:

• How to Link an Element to Another Section of the Page
• Introducing ShortPoint Code Design Element
• Example Use Cases for ShortPoint Code Design Element: Part 1
• Example Use Cases for ShortPoint Code Design Element: Part 2