JS点击跳到指定div的位置
1.给链接a加个#的方式来实现跳转(锚点方法)
<div id="container"> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">div3</a> </div> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div>
2.用animate属性,当点击锚点后,页面滚动到相应的DIV
<div id="container"> <p id="p1">div1</p> <p id="p2">div2</p> <p id="p3">div3</p> </div> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> $(document).ready(function() { $("#p1").click(function() { $("html, body").animate({ scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"}); return false; }); $("#p2").click(function() { $("html, body").animate({ scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"}); return false; }); $("#p3").click(function() { $("html, body").animate({ scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"}); return false; }); });
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步