Как подключить навигационные ссылки к страницам jquery.mobile?

Question

Я пытаюсь создать веб-страницу в первую очередь для мобильных устройств. Пользователь перемещается от страницы к другой, проводя пальцем влево или вправо. Я сделал это с помощью мобильного телефона jQuery.

Теперь я хотел бы подключить его к фиксированной навигационной панели в нижней части экрана, чтобы при пролистывании пользователем активированный элемент меню изменялся соответствующим образом. Может кто-нибудь дать мне код для этого?

Также я хотел бы сделать так, чтобы при нажатии пользователем на элемент меню страница изменялась с той же анимацией слайдов, что и при перелистывании. Теперь у меня есть анимация во втором пункте меню таким образом, что при нажатии на нее происходит анимация, но скользящая страница всегда следующая, а не та, которую я хочу. Поэтому, если пользователь находится на первой странице, а затем нажимает на третий элемент меню, он показывает анимацию скольжения второй страницы для просмотра, а затем переходит на третью страницу, когда он должен автоматически отображать анимацию третьей страницы при нажатии на третий элемент меню.

Вот скрипт смахивания страницы

function navnext( next ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
        transition: "slide"
    });
}
function navprev( prev ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
        transition: "slide",
        reverse: true
    });
}


$( document ).one( "pagecreate", "#page1", function() {
    $( document ).on( "swipeleft", ".ui-page", function( event ) {
        var next = $( this ).jqmData( "next" );
        if ( next ) {
            navnext( next );
        }
    });
    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );
        if (prev) {
            navprev( prev );
        }
    });

    $( document ).on( "click", ".next", function() {
        var next = $( ".ui-page-active" ).jqmData( "next" );

        // Check if there is a next page
        if ( next ) {
            navnext( next );
        }
    });

    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );

        if ( prev && ( event.target === $( this )[ 0 ] ) ) {
            navprev( prev );
        }
    });

    $( document ).on( "click", ".prev", function() {
        var prev = $( ".ui-page-active" ).jqmData( "prev" );

        if ( prev ) {
            navprev( prev );
        }
    });


});

И это моя структура, в которой я добавил плохую анимацию в пункт меню Новости

<div id="page1" data-role="page" data-prev="#page3" data-next="#page2">
    <div data-role="content" class="sivu">
      I am page 1
    </div>
</div>
<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
    <div data-role="content" class="sivu">
       I am page 2
    </div>
</div>
<div id="page3" data-role="page" data-prev="#page2" data-next="#page1">
    <div data-role="content" class="sivu">
        I am page 3
    </div>
</div>
<div class="scrollmenu" id="navbar" data-role="footer">
  <a href="#page1">Home</a>
  <a href="#page2" class="next">News</a>
  <a href="#page3">Contact</a>
  <a href="#about">About</a>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div> 

А вот ссылка на кодовое перо (по какой-то причине оно не работает) https://codepen.io/pinjakumpulainen/pen/YMbNRx