话不多说，请看代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>38demo</title> <link href="https://www.jb51.net/img/mobile-reset.css" /> <style type="text/css"> html,body{ width:100%; height:100%; } .title{ width:100%; margin-bottom:20px; background: #fff; } .titleTap{ position:fixed; left:0; top:0; } .a1{ margin-top:20px; } .title li{ width:33%; float:left; text-align: center; } .content{ text-align: center; margin-top:20px; z-index:100; } </style> </head> <body> <!--other--> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <!--title--> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <!--content--> <ul> <li>11</li> <li>13</li> <li>14</li> <li>21</li> <li>22</li> <li>23</li> </ul> <ul> <li>21</li> <li>22</li> <li>23</li> <li>21</li> <li>22</li> <li>23</li> <li>21</li> <li>22</li> <li>23</li> <li>21</li> <li>22</li> <li>23</li> <li>21</li> <li>22</li> <li>23</li> <li>21</li> <li>22</li> <li>23</li> <li>21</li> <li>22</li> <li>23</li> <li>21</li> <li>22</li> <li>23</li> </ul> <ul> <li>31</li> <li>32</li> <li>33</li> <li>21</li> <li>22</li> <li>23</li> <li>31</li> <li>32</li> <li>33</li> <li>21</li> <li>22</li> <li>23</li> <li>31</li> <li>32</li> <li>33</li> <li>21</li> <li>22</li> <li>23</li> <li>31</li> <li>32</li> <li>33</li> <li>21</li> <li>22</li> <li>23</li> <li>31</li> <li>32</li> <li>33</li> <li>21</li> <li>22</li> <li>23</li> <li>31</li> <li>32</li> <li>33</li> <li>21</li> <li>22</li> <li>23</li> </ul> <script src="https://www.jb51.net/js/jquery-1.11.3.min.js"></script> <script> function nav(){ var height=0; height = $(".topHeight").height(); $(window).scroll(function() { var w = $("body").scrollTop() || $(document).scrollTop(); //获取滚动值 if(w > height) { $(".title").addClass("titleTap"); } else if(w <= 0){ $(".title").removeClass("titleTap") }else{ $(".title").removeClass("titleTap") } }); } nav(); $(function() { $(".title li").click(function() { var index = $(this).index(); var offsetH = $(".content").eq(index).offset().top; console.log(index); console.log(offsetH); $("body").animate({ scrollTop: offsetH-20, }, 500); }) }) </script> </body> </html>