前端基础：同页面不同区块跳转的三种方式

最新推荐文章于 2024-07-03 23:56:01 发布

自己瞎琢磨

最新推荐文章于 2024-07-03 23:56:01 发布

阅读量2.7k

点赞数 1

分类专栏：前端杂七杂八文章标签：前端 javascript html

本文链接：https://blog.csdn.net/huangfengnt/article/details/127410692

版权

前端杂七杂八专栏收录该内容

6 篇文章 0 订阅

订阅专栏

各种语言官网的教程部分经常是这样的页面

一边是目录，一般是具体的内容，点击目录就能跳转到某个区块（当然这个页面还涉及到请求等等，和我这边要讲的不完全一样，我这边只是拿这个结构做个例子）。

这就涉及到了一个页面之中不同区块件的跳转，这里有三种方式可以实现这样的跳转。下面是代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 60px;
            background-color: red;
        }
        .sp {
            height: 50vh;
        }
    </style>
</head>

<body>
    <a href="#box1">通过id跳转到盒子1</a>
    <br />
    <a href="#box2">通过name跳转到盒子2</a>
    <br />
    <!-- 通过hash事件进行的跳转 -->
    <a href="javascript:;" class="btn">点击跳转到盒子三</a>
    <div class="sp"></div>
    <div id="box1" class="box">
        我是盒子1
    </div>
    <div class="sp"></div>
    <div class="box">
        <a name="box2">跳转到box2</a>
        我是盒子2
    </div>
    <div class="sp"></div>
    <div class="box" id="box3">
        我是盒子3
    </div>
    <div class="sp"></div>
    <script>
        let btn = document.querySelector(".btn")
        btn.addEventListener("click", () => {
            location.hash = '#box3'
        })
    </script>
</body>

</html>

这里的.sp其实就是空白的占位格子，让整个页面长一点，具体的高度是50vh。

第一种方式是id加a链接的形式，具体的对应如下

 <a href="#box1">通过id跳转到盒子1</a>

 <div id="box1" class="box">
        我是盒子1
    </div>

这里的a链接的href对应的是我们盒子id，hash本身就是一种锚定

第二种方式是a链接跳转到a链接，这里href对应的是a链接的name属性，

<a href="#box2">通过name跳转到盒子2</a>


 <div class="box">
        <a name="box2">跳转到box2</a>
        我是盒子2
</div>

第三种方法改变的location对象，实际上是通过click行为手动改变hash，需要注意这种写法的herf要写个空

 <a href="javascript:;" class="btn">点击跳转到盒子三</a>

 <div class="box" id="box3">
        我是盒子3
  </div>
  <script>
        let btn = document.querySelector(".btn")
        btn.addEventListener("click", () => {
            location.hash = '#box3'
        })
  </script>

所谓的页面也跳转行为其实就是让目标区块在页面内顶格，当然如果页面长度不够的情况下，也会出现跳转标签在页面中间出现的情况。还是非常简单的。