## JQuery實現導航條點擊緩慢跳轉 > 效果如圖  **原理: 在原來導航條的基礎上，通過jquery創建點擊事件，控制scrollTop的大小** 注：以下代碼為在原基礎上增加 > html代碼 ``` <div id="aboutc">about</div> ``` >css代碼 ``` #aboutc { width: 80%; margin: 500px auto 0 auto; } ``` >javascript代碼 ``` $(function(){ $(window).scroll(function(){ var scroll = $(window).scrollTop(); //scroll為鼠標至頂部距離 }) $(function(){ var aboutc = $("#aboutc").offset().top; //aboutc為about部分距離頂部距離 $("#about").click(function(){ $("html, body").animate({scrollTop: aboutc}, 500); //當點擊about時，頁面至頂部距離為about部分據頂部距離，animate給過程一個時間 }) }) }) ``` ----- **整個項目已上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/個人網頁導航條)**