使用jquery mobile从上到下滑动列表屏幕，反之亦然

Question

我正在开发移动应用。我需要从上到下滑动列表屏幕，反之亦然。 请帮助我使用jquery mobile从上到下和从下到上滑动屏幕，因为我对jquery不太了解。提前致谢。以下是我的代码

     <div data-role="page" data-theme="a" data-content-theme="a">
     <div data-role="header" data-position="fixed" data-theme="b">
     <h1>Swipe</h1>
      <a href="home.html" class="ui-btn-right" data-icon="back"  rel="external" data-iconpos="notext" >Refresh</a> </div>
      <form id="form1" >
       <div data-role="tabs" id="tabs">
      <div data-role="navbar">
      <ul>
      <li><a href="#Alerts" data-ajax="false" class="ui-btn-active" >Year</a></li>
      <li><a href="#Activities" data-ajax="false" >Month</a></li>
       </ul>
       </div>

       <div data-role="content" id="Alerts" class="checkbox">
       <div class="content-primary" >
       <ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true" data-split-icon="carat-r">
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
        <li><a href="#">
          <h2>january</h2>
          </a> </li>
          </ul>
        </div>
        </div>


    <div data-role="content" id="Activities" class="checkbox">
    <div class="content-primary" >
      <ul data-role="listview"  data-inset="true" data-split-icon="carat-r" >
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
        <li><a href="#">
          <h2>2012</h2>
          </a> </li>
          </ul>
         </div>
        </div>
         </div>
       </form>
      </div>