<!DOCTYPE html><html lang="en"><head> <title>Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/> <style type="text/css"> *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .main { height: 100vh; background-color: #dddddd; } header{ width: 100vw; background-color: olivedrab; color: #fff; } </style></head><body><div class="main" id="birinci"> <header> <h3> Ilk Sayfa </h3> <a class="next">Ileri</a> </header> <div class="icerik"> </div></div><div class="main" id="ikinci"> <header> <h3> Ikinci Sayfa </h3> <a class="back">Geri</a> </header> <div class="icerik"> </div></div><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script type="text/javascript"> 'use strict'; $(window).on("navigate", (e, data) => { var direction = data.state.direction; if (direction == 'back') { alert('Geri tusuna basildi'); } }); $('.next').on('click', ()=> { $.mobile.navigate("#ikinci", { transition: "slide" }); }); $('.back').on('click', () => { $.mobile.navigate("#birinci", { transition: "slide" }); });</script></body></html>