How can we help you today?

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:


sample redirected link


TABLE OF CONTENTS


Prerequisites

  • You have the latest version of ShortPoint SPFxinstalled 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:



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 69 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