How to Link an Element to Another Section of the Page

This article outlines how you can establish a redirect from a Design Element to a specific Section or Design Element within the same page. This means that when you click a link or an element that is attached to a link, it will bring the view to the part of the page where the Section or Design Element is located.

Here is an example:

TABLE OF CONTENTS

• Prerequisites
• Redirect to Another Section or Design Element on the Page
  • Step 1: Identify the Section or Design Element by adding an ID name
  • Step 2: Edit the linking Design Element
  • Step 3: Save and Republish

Prerequisites

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

Redirect to Another Section or Design Element on the Page

Configure a Design Element such that an action (i.e. clicking a link) can instantly scroll to a chosen Section or Design Element on the page. You can do this by following the steps below.

Note: This solution only works for Design Elements and Sections within the same page.

Step 1: Identify the Section or Design Element by adding an ID name

First, you have to add an ID name to the Section or Design Element where you want your link to redirect. To do this

• Open the Section or Design Element settings by clicking the cogwheel icon
• Go to the Custom CSS tab
• Enter a name in the ID field. In our example, we used scrollHere
• Hit the checkmark button to apply your changes

Learn how to add an ID name to identify the Section or Design Element where you want the link to redirect in the interactive tutorial below:

Note: If you are going to redirect several links to different parts of the page, make sure to use unique ID names (i.e. you can add a number to additional linkages scrollHere2, scrollHere3, etc.)

Step 2: Edit the linking Design Element

You can use any ShortPoint Design Element with a link functionality as the redirect to any Section or Design Element of the page. To do this

• Select the cogwheel icon on the linking Design Element
• Navigate to the link field (this can vary depending on the Design Element you are using)
• Add the Section or Design Element ID name you used in Step 1 with a hashtag at the beginning. In our example, we will be adding #scrollHere
• Update the Design Element

Click Get Started to follow the steps in this interactive tutorial.

Step 3: Save and Republish

Do not forget to save your changes and hit Republish.

Now, every time your users click the link or Design Element, they will be redirected to the part of the page you intended.

Related articles:

• How to Link your Logo to a Page

• How to Add a Link to a Specific Tab Element