Issues with internal links to sections (Anchors)

[CETA - Centro de Estudios Tributarios]

Hello Telerik team,
In a view, we have several internal links to an anchor. Traditionally the HTML links to anchors work using the hash (#) symbol. Example:

---------------------------------------------------------------
HTML Contents of the view:
---------------------------------------------------------------
HTML Line 1
HTML Line 2
<a href='#Bottom'>Go to bottom</a>
HTML Line 4
HTML Line 5
<a href='#Bottom'>Go to bottom</a>
HTML Line 7
HTML Line 8
<a id="Bottom">
This is the bottom of the document
---------------------------------------------------------------

When the user clicks/touches some of those link, the view effectively scrolls to the indicated section (anchor). However, after the click/touch event, the application enters into a frozen state where no more events are received. It seems like an invisible layer at the top of the application that captures all the events.

Thank you

JC

[Tina Stancheva]

Hi JC,

Mobile apps use the # symbol in a link href to navigate to specific view. This is why the anchor linking you need to implement doesn't work out-of-the-box in a mobile app.

If you're using jQuery Mobile, then you can take a look at this SOF thread discussing possible implementations of links to anchors.

If you're using Kendo UI Mobile, then you will have to implement custom navigation by handling the click event of your hyperlinks and manually scrolling to the anchor. You can, for instance, use the kendo.mobile.ui.Scroller methods. You can examine this thread for a sample example of the same.

I hope the above information will help you move forward with your development. However, please let us know if we can further assist you.

Regards,
Tina Stancheva
Telerik