Your Customers are Mobile, you will be too …

jQuery Mobile: Fixed Floating Footer with iScroll

In this tutorial we will be showing you how to fix the bug in jQuery mobile with fixing your footer to the bottom of the page in the floating position. It is a common problem with a lot of dud solutions out there so I will sharing with you the best fix I have managed to find after many hours of research.

Often if you do manage to get the footer to float in the right position with jQuery mobile the button stop working the moment you start scrolling. This solution gets the footer to remain fixed to the bottom of the mobile screen while keeping the button functioning fully.

Getting jQuery Mobile and iScroll Set-up

Naturally the first thing we need to do is get all our jQuery assets into place so that we can get working.

So first step is to start a new project like we normally would. Start a fresh jQuery site in whatever method you would normally set it up. For me this is simply starting a new jQuery mobile project in Dreamweaver CS6. Make sure your jQuery mobile .js files are the latest by going to

Next we need to make sure we have the latest version of iScroll as well. We need to get the iScroll.js from :

Place this file in the same folder as your jQuery mobile files.

We now only need one more file to enable us to get both these systems to work together. This is the file found on this page:

Again place this in the same folder as your jQuery mobile javascripts and iScroll files. As a minimum you should have the following files in this folder:

  • iScroll.js
  • jQuery.1.7.1.min.js

If you have these files in your jQuery mobile folder of your phone we are now ready to to begin the next step.

The HTML side of jQuery Mobile and iScroll

This is like I said before the easiest system I have encounter so far for getting iScroll and jQuery mobile to work together (not to mention the only one that works).

Create a new HTML file and call it index.html. In the head of this file we need to call all the above files we need to make jQuery Mobile and iScroll work together.

<!DOCTYPE html> 
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>
    <meta http-equiv="Content-Type" content="text/html/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link href="jquery-mobile/" media="screen" rel="stylesheet" type="text/css" />
    <script src="jquery-mobile/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/" type="text/javascript"></script>
    <script src="jquery-mobile/iscroll.js" type="text/javascript"></script>
    <script src="jquery-mobile/" type="text/javascript"></script>

Now we have done this we have done everything we need to do in our header. We con now  begin work on the body of our file. For this I will only be adding one page.

So inside the body tags we need to set up our page like this:

<div data-role="page" id="page">
 <div data-role="header" data-position="fixed">
   <h3>First Aid</h3>
 <div data-role="content">
     <p> stick your contents in here preferably lots of it.</p>
 <div data-role="footer" data-position="fixed">
  <h3>your footer contents here</h3>

As you can see this pretty standard. But now we need to get this page ready to accept the iScroll widget within it. So any pages inside this document that need to use the iScroll ability we need to change the page declaration line. We need to change it from:

<div data-role="page" id="page">


<div data-role="page" id="page" data-iscroll="enable">

This page is now ready to accept the iScroll div inside the content area. So inside this section:

<div data-role="content">
     <p> stick your contents in here preferably lots of it.</p>

We need to stick a div that is data-iscroll enabled around our content. Like this:

<div data-role="content">
   <div data-iscroll="scroller">
     <p> stick your contents in here preferably lots of it.</p>

Naturally to test it properly yourself you will need to put a lot more content in this section so that the page will scroll but I will leave that up to you.

From here on in all you have to do to each page that requires the scroller is follow the last two steps. Enable the page for iscroll events and add the data-iscroll=”scroller” div around our content. This will even work if you have many pages in the same html document as most jQuery mobile apps do.

Hope you found this helpful and see you again soon.

3 Responses to jQuery Mobile: Fixed Floating Footer with iScroll

  • Thanks for the help, steve. I don’t have any experience with smart phones beyond one game of ‘angry birds’ so your help is invaluable. I fear I may need to re-do my site from scratch to make it work but If I can get it live tested it at least tells me what’s wrong

  • Hi

    Thanks for the solution, u made my day man :) thanks for the help. A little help more would be APPRECIATED, I want to have the rubber band effect in the above example. can you please guide me how to ACHIEVE that



Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: