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

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


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


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


建议采用代码控制。

相关文章
|
1月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
WK
|
1月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
52 1
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
17天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
40 2
|
24天前
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
本文介绍了Twaver HTML5中的拓扑元素(Element),包括网元(Element)、节点(Node)和连线(Link)的基本概念和使用方法。文章详细解释了Element的属性和方法,并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
44 1
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
|
1月前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1