How can we help you today?

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

  • 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.


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:


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


result when using the link


Related articles:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 74 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more