1. 背景
很多时候,我们需要跳转到一个指定id的元素的位置,其实有几种实现方式。
2. 通过jQuery实现
可以通过jQuery跳到指定元素所在的高度位置top
。
<html> <head> <title>base tag demo</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <input type="button" onclick="btnJump()" value="跳转"/> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <div id="div1">此处</div> <script> function btnJump(){ $(window).scrollTop($("#div1").offset().top); } </script> </body> </html> 3. 通过超链接实现 其实还有一种更加简单的方法,可以直接用超级链接实现。 <html> <head> <title>base tag demo</title> </head> <body> <a href="#div1">跳转</a> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <div id="div1">此处</div> </body> </html>
注意点击后,网页地址中也包含main.html#div1。
所以我们直接通过在网页后面添加#div1,即可在进入页面时直接跳到div所在位置。
4. 对比总结
虽然超链接方式更加简单,但是不够灵活。
使用代码的方式,我们可以完全自主掌握跳转的时机和方式。
最后超链接还会在网页后面添加后缀,有时候会影响页面的正常运转,特别是使用了一些前端框架时。
建议采用代码控制。