redirection within a component

[Bhavani_B]

Hi folks,

       I have a requirement to redirect the the link within the same page. Example: link to be redirected on the Table/heading within the page.  Any one Please suggest the steps to implement this in AEM.

Thanks in advance

Thanks,

Bhavani

[Asutosh_Jena_ · Accepted solution]

Hi @Bhavani_B 

This functionality is called the anchor link or scroll to functionality. You can define an id attribute to the component div with the destination section which can be any type of content such as table/heading/paragraph/image anything. Now when you access the URL with #{id-value} the page will be scrolled to the respective div where it will find a match in the DOM.

Let's say I have a content like below:

<h2 id="something">Support for our adult patients with ADHD or with moderate to severe B.E.D. during <span class="nowrap">COVID-19</span></h2> in the markup in HTML.

Now I if I access the page with www.website.com/mypage#something it will redirect/scroll to the respective section.

This Id attribute can be applied to any element/div or section anything in AEM.

See the link below:

https://as.nyu.edu/communications/aem-faq/create-anchor.html

Thanks!

[Bhavani_B]

Hi asutosh_jena,

[Bhavani_B]

Hi asutosh_jena, Yes as you said giving the parent div id at the end of the url helps to redirect to the specific section. But i couldnt able to find how to create anchor tag in aem rich text in the mentioned URL. Please help