HTML跳转到页面指定元素位置

简介: 本文目录1. 背景2. 通过jQuery实现3. 通过超链接实现4. 对比总结

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. 对比总结

虽然超链接方式更加简单,但是不够灵活。


使用代码的方式,我们可以完全自主掌握跳转的时机和方式。


最后超链接还会在网页后面添加后缀,有时候会影响页面的正常运转,特别是使用了一些前端框架时。


建议采用代码控制。

相关文章
|
17天前
使用HTML编写注册页面
使用HTML编写注册页面
10 1
|
1月前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
29 0
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
2月前
一款跳转警告HTML单页模板
一款跳转警告HTML单页模板
26 0
一款跳转警告HTML单页模板
|
2天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
17 10
|
3天前
错误或拦截页面的html代码
错误或拦截页面的html代码
4 0
错误或拦截页面的html代码
|
12天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
17 0
|
12天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
30天前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
9 0
|
30天前
|
安全 数据安全/隐私保护
HTML表单元素
HTML表单元素
8 0