JavaScript之同一页面中的跳转

最新推荐文章于 2023-10-19 09:38:33 发布

cloudOnSkyline

最新推荐文章于 2023-10-19 09:38:33 发布

阅读量906

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125548134

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍如何实现同一页面中位置的跳转。主要有三种方法。

1.利用a链接的href属性，以#开头，通过id名的匹配实现位置的跳转

2.也是利用a链接的href属性，以#开头，通过name属性跳转。（跳转的目标标签必须是a标签）

3.通过给location.hash赋值进行跳转

<!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>
</head>

<body>
    <input type="button" onclick="showMsg()" value="点击跳转">
    <!-- tip1:id名跳转 -->
    <a href="#test">跳转</a>
    <!-- tip2:name属性跳转 -->
    <a href="#demo1">name跳转</a>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <a name="demo1">678</a>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p id="test">156</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <a href="javascript:;">1</a>
    <p>1</p>
    <a href="#">1</a>
    <script>
        function showMsg() {
            location.hash = '#test';
        }
    </script>
</body>

</html>

cloudOnSkyline

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之同一页面中的跳转

本文主要介绍如何实现同一页面中位置的跳转。主要有三种方法。1.利用a链接的href属性，以#开头，通过id名的匹配实现位置的跳转2.也是利用a链接的href属性，以#开头，通过name属性跳转。（跳转的目标标签必须是a标签）3.通过给location.hash赋值进行跳转...
复制链接

扫一扫