Question

I am using the jQuery mobile framework to build a mobile site and believe my button href attribute is not working which is the menu button running inline with the site branding in the header.

The button is supposed to send the user to the footer of the page when they click with the following code:

<a data-role="button" href="#mainFooter" data-icon="arrow-d" data-iconpos="left" class="headerbutton">Menu</a>

Then the corresponding div tag with an id of “mainFooter” is present is within the footer:

<div id="mainFooter" name="mainFooter"></div>

I am at a loss to understand why when the button is clicked is the user not sent to the footer. Please find a link to the web page below.

http://www.test-bed.co.uk/mobile/chatlive.php

Answer 1

From the JQM Docs -> Page Anatomy Section:

PLEASE NOTE: Since we are using the hash to track navigation history
for all the Ajax ‘pages’, it’s not currently possible to deep link to
an anchor (index.html#foo) on a page in jQuery Mobile, because the
framework will look for a ‘page’ with an ID of #foo instead of the
native behavior of scrolling to the content with that ID.

You will need to implement a custom scroll potentially using $.animate() or similar.

EDIT

Something like may work for you:

$(document).delegate('.headerbutton', 'click', function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $('#mainFooter').offset().top }, 1000);
});

I hope this helps!