How to navigate within the same page using links in HTML5, JQuery mobile ..?
I have a scenario where I am trying to navigate a page of my android application using links. I am using HTML5 with Phonegap and JQuery Mobile.
For example, I have:
<h3><a name="try"/> Header2 </h3>
and when I give,
<a href="#try"> Navigate to Header2 </a>
to navigate to a header section on the same page, I cannot do this. Can someone please provide some solution for this problem.?
As part of the solution given by @Adleer, tried working with multiple sections of the same HTML document. Below is a sample code for your reference:
<body>
<div data-role="page" id="page3">
<div data-role="header">
<h3>Common diphthongs</h3></div></div>
<div data-role="page" id="diphthongs">
<div data-role="content">
<ul>
<li> Test </li>
<li> item2 </li>
</ul>
</div></div>
<div data-role="page" id="vowels">
<div data-role="content">
<ul>
<li><a href="#diphthongs"> Link to Diphthongs </a> </li>
<li><a href="#page3"> Link to page3 </a> </li> </li>
</ul>
</div></div>
</body>
The above code is for one of the provided solutions.
source to share
In the last added jsfiddle you had some errors in HTML selectors and attributes. You are using a id
unique id attribute and a $('#Anyname')
case sensitive selector (mind capital / small letters) to access the properties of that element.
Or use an attribute name
with id unqiue and a $('[name=Somename]')
case sensitive selector (mind capital / small letters) to access the properties of that element.
To scroll the list to any element, jQuery Mobile has its own scroll function .silentScroll()
. Please note that $.mobile.silentScroll()
it has no animation, unlike .animate({ scrollTop: value }, animation-speed)
.
$('selector').on('click', function () {
var position = $.mobile.activePage.find('#vowels2').get(0).offsetTop;
$.mobile.silentScroll(position);
});
Where .get(0).offsetTop
is the y-axis position value for the target element and $.mobile.activePage
is the active / current page / viewport.
source to share
You want to refer to id, you can use paragraph, span or div.
<span id="try">Header2</span>
Then you can navigate to it as expected:
<a href="#try">Navigate to Header2</a>
Just as you did
<a name="try/> Header2
is wrong, the quote closure is missing and you are not closing the attribute correctly.
source to share