Anchor Jumping across the section within page

Question

I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.

As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.

Here, I add one snap to clear out the question as below.

As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).

I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)

Please suggest any idea to achieve this functionality.

Recreant

I haven't used A2, but I'm sure there is some way of loading the data on clicking a button/anchor and presenting it to the user. The other approach would be to load ALL the data and use in page anchors: rapidtables.com/web/html/link/html-anchor-link.htm – Epithelium

Capture multiple key down events #5203907 On all keys release load content, if it is fast enough just load it whenever key is arrow key is released Another approach would be load everything on first run, then instead of loading content just display hidden tabs – Blackface

@Raimonds, We have same line of thinking. I completed this task using capture multiple key events as required. – Recreant

Answer 1

What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.

Your dynamic content can always be wrapped in something (even a div) that has its focus managed.

I hope this helps!

Fought

This is a borderline link-only answer. You should expand your answer to include as much information here, and use the link only for reference. – Sonora