Try ShortPoint nowThis article will showcase how you can create a direct link that is anchored to a specific Paragraph on a SharePoint page. Simply follow the steps outlined in this solution article to learn how.
NOTEIf you wish to create an anchor link for a specific Section or Design Element, check out How to Create an Anchor Link That Opens Specific Content on a SharePoint Page.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have a Text Design Element with paragraphs of text inside.
Step-by-step Tutorial
Follow the steps below to learn how to create anchor links:
Step 1: Edit the ShortPoint Web Part
Go to the SharePoint page you want to use and click Edit:
Close the Toolbox:
Edit the ShortPoint web part:
Step 2: Switch to Grid Mode
NOTEBefore proceeding, make sure you already have a Text Design Element with paragraphs inside. In our example below, we want to be redirected to the highlighted paragraph:
Click the Switch to Grid Mode icon:
Step 3: Open Code View
Hover over the Text Design Element you want to use and click the cogwheel icon:
Click the down icon:
Select the Code View icon:
Step 4: Add a Unique ID
Look for the paragraph you want to use. Notice that you’ll see <p at the start:
Right after <p, write id=”unique-id”.
NOTEYou can replace unique-id with any name you want. In our case, we used traveler. Make sure to take note of it as you will need it to create the Anchor link.
Then, click the Code View icon again:
Once satisfied, click Update:
Step 5: Add the Code Design Element
Click the plus icon to open the library of Design Elements:
Look for Code and select it:
Step 6: Copy the JavaScript Code
Copy the JavaScript Code below:
(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)
})()You can customize the following values:
- block value - controls the vertical alignment of the element within the scrollable ancestor container. You can learn more about the values you can add in the Element: scrollIntoView() method.
- setInterval value - specify the number of seconds before the page scrolls down to the specific item you set. Currently, the setInterval’s value is 2000, which equals 2 seconds.
Step 7: Paste the code
Paste the code in the JavaScript field:
NOTEMake sure you disable Sandbox Mode:
Click Insert:
Step 8: Save
Click the eye icon to see your page in real-time:
Save your changes:
Step 9: Create and Share the Anchor Link
Follow this format to create the Anchor link:
https://<page URL>#<IDName>
In our example, the URL we will share is:
https://my.sharepoint.com/#traveler
Where:
- Page URL is https://my.sharepoint.com/
- # is the symbol for a hashtag
- ID is traveler
You now have a shareable URL that you can provide to your users to direct them to a specific paragraph on your intranet page:
BONUS TIP: You can use your anchor links to create a useful navigation menu on your page. Simply add the link on a Design Element that allows URL linking. In our example, we used Tiles:
Related articles:
- How to Hide Time When Displaying Contents of a Date Column from a SharePoint Calendar List
- How to Use the SharePoint Drag and Drop Feature to Create a Full-width ShortPoint Section
- How to Create an Anchor Link That Opens Specific Content on a SharePoint Page
- How to Create Anchor Links for Navigation in your SharePoint Page
