XiaoLian

回到網頁頂部，是很常見的功能，作法很多種，在此分享網路上的寫法，本人覺得很實用並紀錄之。 使用JQuery前，需要引用Jquery元件。 HTML（參考）： <a href="#top" id="gotop" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-arrow-u ui-nodisc-icon ui-alt-icon ui-btn-right">Top</a> Javascript（參考）： <script type="text/javascript"> //回到最上層 $(function(){ //動畫方式回到上層 $(" #gotop ").click(function(){     jQuery("html,body").animate({     scrollTop:0     },1000); }); //目前的位置距離網頁頂端，若大於300px則顯示回上層圖示;否則隱藏 $(window).scroll(function() {    if ( $(this).scrollTop() > 300){       $(' #gotop ').fadeIn("fast");    } else {       $(' #gotop ').stop().fadeOut("fast");    } }); }); </script> 執行畫面（初始）︰ 執行畫面（捲軸下拉）︰ 註：超連結所設定的class，是引用Jquery mobile所產生的圖示，可以用Img or Div Tags來替換。

近來透過手機上網普及化，設計好的專屬手機網站，顯得重要許多，一方面受限於手機螢幕大小，版頭版尾擺設格外小心，分享實際應用情形。 部分HTML（參考）︰ <!-- Fixed Header Start--> <div id=" fixed-header-slide "> <div id=" fixed-header-wrap "> < header data-role="header" style="background: #FFFFFF;border: none;" > <!-- 頁頭 --> <div><img src="images/logo_banner.jpg" border="0" class="photo"> <a href="#mypanel" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a> </div> </header> </div> </div> <!-- Fixed Header End--> <!-- Fixed Footer Start--> <div id=" fixed-footer-wrap "> <footer data-role="footer"> <!-- 頁尾 --> <div class=" footer_mobile " id="footer"> … 省略 … </div> </footer> </div> <!-- Fixed Footer End--> CSS（參考）︰ <style ty...