文档描点
通过a标签跳转到指定的文档位置, 通过href属性页面滚动到指定的标签id上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 900px; } #div1{ background-color: aqua; } #div2{ background-color: salmon; } </style> </head> <body> <a href="#div1">去到idv1</a> <a href="#div2">div2</a> <div id="div"></div> <div id="div1">div1</div> <div id="div2">div2</div> </body> </html>
有时候可能是节点样式设置问题, 上面的方法不灵光, 可以使用js脚本控制
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 900px; } #div1{ background-color: aqua; } #div2{ background-color: salmon; } </style> <script src="src/js/jquery_min.js"></script> </head> <body> <a data-id="div1">去到idv1</a> <a data-id="div2">div2</a> <div id="div"></div> <div id="div1" >div1</div> <div id="div2">div2</div> <script> $("a").click(function() { var id = this.getAttribute("data-id"); $("html,body").animate({scrollTop:$("#"+id).offset().top},1000) }) </script> </body> </html>