html页面定位到同一个页面指定位置的4种实现方式_html新的页面在本页指定区域显示-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37393900/article/details/103612967

本文详细介绍了在HTML页面中如何通过四种不同的函数实现页面内部的定位，帮助读者理解并掌握在不刷新页面的情况下，如何快速跳转到页面的特定部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width"/>
  <meta charset="utf-8"/>
  <title></title>
  <meta name="description" content="Please fill in your information. Power by WuXi Digital &amp; Mobile Solution">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="css/index.css" type="text/css"/>
  <title>使用说明</title>
  <script src="js/jquery.min.js"></script>
</head>
<!--手机端调试器-->
<!--  <script src="//cdn.jsdelivr.net/npm/eruda"></script>-->
<!--    <script>-->
<!--      eruda.init();-->
<!--      console.log('控制台打印信息');-->
<!--    </script>-->
<body>
<div style="width: 100%">
  <div class="header">
    <div id="top">
      <img style="width: 100%;list-style-type:none; float: right" src="./img/header.png">
    </div>
    <div class="desc">
      <span οnclick="dingRegister()">注册 | </span>
      <span οnclick="changeMobile()">修改手机号 |</span>
      <span οnclick="forgetPassword()">忘记密码</span>
    </div>
  </div>

  <div >
    <img  id="register" style="width: 100%;list-style-type:none;float: right" src="./img/register2.png">
  </div>
  <div >
    <img id="mobile" style="width: 100%;list-style-type:none;float: right" src="./img/mobile2.png">
  </div>
  <div>
    <img id="password" style="width: 100%;list-style-type:none;float: right" src="./img/password2.png">
  </div>
  <div class="getTop" οnclick="getTop()"><img style="width: 80%;list-style-type:none;" src="./img/top.png"></div>

</div>
</body>
<script type="text/javascript">
  function dingRegister() {
    document.querySelector("#register").scrollIntoView({
      behavior: 'smooth'
    })
  }
  function changeMobile() {
    $("#mobile")[0].scrollIntoView();
  }
  function forgetPassword() {
    window.location.href = "#password"
  
  }
  function getTop(){
    $("html,body").animate({scrollTop: $("#top").offset().top}, 500);

  }
</script>
</html>

四个function中分别是四个定位的方式。