## 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/个人网页导航条)**