I'm developing a lightning component to show a complex form. I need to provide navigation between different parts of the form. In HTML, we can do this by anchor tags but I'm not sure what is the best way in lightning component to achieve this.

I have form sections e.g. Personal Details Address Employment.

User want to clock the navigation bar to move to relevant section. Any idea how should I do this?

Thanks in advance

  • Do you intend to navigate between Lightning Components using the nav bar? – Praveen Aug 23 '16 at 16:56
  • I have a one large form. I need to navigate between sections of the same form. Whole form is one single component – Attiq Ur-Rehman Aug 23 '16 at 16:57
  • So you are trying to do something like : <a href="#section2">Section 2</a> on clicking on the link, browser scroll to that div.Is that what you want ? – Praveen Aug 23 '16 at 17:01
  • Correct. I just read in lightning component documentation "Avoid # in the href Attribute of Anchor Tags". Hence, I'm reluctant to use anchor tags. – Attiq Ur-Rehman Aug 23 '16 at 17:16
  • You are right, I just now saw this in the docs.You need to scroll to the specific div using javascript as mentioned here.But am not sure if it would work with Locker Service Enabled and SF1.Need to check that out. – Praveen Aug 23 '16 at 17:26

I don't know if you ended up finding a solution, but I'm using the scrollIntoView() method linked to by Praveen, and it works with Locker Service enabled (I'm on Winter '17 at the time of this post) and it works on SF1.

Note, in my case I'm delivering my lightning component through a legacy VF page, so I'm not sure if this works in a pure Lightning Experience environment.

If you're using anchor tags, or if you have headers, if you give them an aura:id, you can get your link/button/whatever to jump to that element doing something like this...

<!-- In your markup -->    
<a href="javascript:void()" id="link_salesCallDetails" onclick="{!c.js_jump}">jump</a>
<a id="anchor_salesCallDetails"></a>

// In your js controller
js_jump: function(component, event, helper) {
    var anchor = component.find(event.target.id.replace('link_','anchor_'));

If your initiating UI element is a component itself, the you'd use "aura:id" in your markup instead of plain id, and the var anchor would be something like this...

var anchor = component.find(event.getSource().getLocalId().replace('link_','anchor_'));

This seems to be working in browser and SF1, at least at the time of this post.

| improve this answer | |
  • This! Is! Perfect! – loeachim Jul 18 '19 at 20:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.