Forum | Appery.io

I have two pages in my app, pageA and pageB.
In pageB I have placed HTML content that includes a bunch of HTML anchor points, ANCHORA, ANCHORB, ANCHORC etc.
I know that in pageA you can create a 'navigate to page event' that will take you to pageB.
However I need this event to open pageB and navigate to a specific anchor point (eg ANCHORC).
How can I do this? Any code examples would be appreciated.

Hi,

1) Add a button

2) Add localStorage variable "scrollTo" with value = Component Name where you want to scroll.

3) On Page Show event run the following code:

code
if ( localStorage.getItem("scrollTo") ) {
var link_position = Appery( localStorage.getItem("scrollTo") ).offset(); // needed component coordinates
window.scrollTo( 0, link_position.top ); // scrolling there
localStorage.removeItem("scrollTo"); // deleting the variable to avoid unnecessary invoking in the following navigation to pages without having to scroll.
}/code

Thanks for answering. I tried the code you suggested but I am having problems.

About step 2.
I am a bit confused about the part where you say "value = Component Name where you want to scroll".
My component is a panel named 'panel_2' which is part of a page named 'pageB'.
Inside this panel I have pasted HTML that contains many anchors with different IDs, (mylink1, mylink2 etc).
So what value should the localStorage variable named "scrollTo" have?

1) panel_2 ?
2) pageB ?
3) mylink1 ?

I have tried all of the above values but scrolling does not work.
Chrome's console shows this error:
'Uncaught TypeError: Cannot read property 'top' of undefined'.

Hi,

When the logic of your application requires a navigation to another page and a particular mark on this page, then you know the name of the component where you go - before the call to turn the page - set the value of the variable scrollTo.

You can use not a variable name, but id of the components or other items that you probably generate on the page. Then change the code for the event Page Show:
codevar link_position = Appery( localStorage.getItem("scrollTo") ).offset();/code
to:
codevar link_position = $("#" + localStorage.getItem("scrollTo") ).offset();/code

Thanks, your suggestion works.