不使用a标签, 如何实现在页面中位置跳转?

发布于
2022-05-23

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Template</title>

        <!------------ Stylesheet Includes ------------>
        <link rel="stylesheet" href="http://localhost:8000/library/bootstrap/5.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="version/0.0.2/css/ng-box.css">
    </head>
    <body>

        <!------------ Page Styles ------------>
        <style>
            .div {
                height: 50vh;
            }

            .item {
                cursor: pointer;
            }

            #d1 {
                background-color: var(--ng-red);
            }

            #d2 {
                background-color: var(--ng-blue);
            }

            #d3 {
                background-color: var(--ng-green);
            }
        </style>

        <!------------ Dom Elements ------------>
        <nav id="common-nav"></nav>
        <header id="common-header"></header>
        <main>
            <section id="part">
                <div class="box-container">

                    <!------------ Your Content ------------>
                    <ul class="dynamic-data sticky-top d-flex gap-5 py-3 fs-3 bg-white"></ul>
                    <div id="d1" class="div"></div>
                    <div id="d2" class="div"></div>
                    <div id="d3" class="div"></div>

                </div>
            </section>
        </main>
        <footer id="common-footer"></footer>

        <!------------ Script Includes ------------>
        <script src="http://localhost:8000/library/jquery/3.6.0/jquery.min.js"></script>
        <script src="version/0.0.2/js/ng-box.js"></script>

        <!------------ Page Scripts ------------>
        <script>
            const partDynamicDataTraverse = {
                "$element": $("#part .dynamic-data"),
                "list": [{
                        "href": "#d1",
                        "name": "skip1"
                    },
                    {
                        "href": "#d2",
                        "name": "skip2"
                    },
                    {
                        "href": "#d3",
                        "name": "skip3"
                    }
                ]
            }

            for (data of partDynamicDataTraverse.list) {
                partDynamicDataTraverse.$element.append(`
                    <li><div class="item" href="${data.href}">${data.name}</div></li>
                `)
            }
        </script>
    </body>
</html>

需要通过给 .item 增加 href 属性来指定跳转的位置, 应该如何实现?

javascript html jquery

阅读 2.6k

3 个回答

得票最新

逆水行舟

885

发布于
2022-05-23

✓ 已被采纳

是这样吗？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Template</title>

        <!------------ Stylesheet Includes ------------>
        <link rel="stylesheet" href="http://localhost:8000/library/bootstrap/5.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="version/0.0.2/css/ng-box.css">
    </head>
    <body>

        <!------------ Page Styles ------------>
        <style>
            :root {
                --ng-red: red;
                --ng-blue: blue;
                --ng-green: green;
            }
            .div {
                height: 50vh;
            }

            .item {
                cursor: pointer;
            }

            #d1 {
                background-color: var(--ng-red);
            }

            #d2 {
                background-color: var(--ng-blue);
            }

            #d3 {
                background-color: var(--ng-green);
            }

            ul > li {
                display: inline-block;
                cursor: pointer;
                margin-left: 20px;
            }
        </style>

        <!------------ Dom Elements ------------>
        <nav id="common-nav"></nav>
        <header id="common-header"></header>
        <main>
            <section id="part">
                <div class="box-container">

                    <!------------ Your Content ------------>
                    <ul class="dynamic-data sticky-top d-flex gap-5 py-3 fs-3 bg-white"></ul>
                    <div id="d1" class="div"></div>
                    <div id="d2" class="div"></div>
                    <div id="d3" class="div"></div>

                </div>
            </section>
        </main>
        <footer id="common-footer"></footer>

        <!------------ Script Includes ------------>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <!-- <script src="version/0.0.2/js/ng-box.js"></script> -->

        <!------------ Page Scripts ------------>
        <script>
            const partDynamicDataTraverse = {
                "$element": $("#part .dynamic-data"),
                "list": [{
                        "href": "#d1",
                        "name": "skip1"
                    },
                    {
                        "href": "#d2",
                        "name": "skip2"
                    },
                    {
                        "href": "#d3",
                        "name": "skip3"
                    }
                ]
            }
            function test(href) {
                const id = href.replace('#', '');
                document.getElementById(id).scrollIntoView();
            }

            let liEle = '';
            for (data of partDynamicDataTraverse.list) {
                liEle += `<li onclick="test('${data.href}')"><div class="item">${data.name}</div></li>`;
            }
            partDynamicDataTraverse.$element.append(liEle);
        </script>
    </body>

不死小强

2.2k73043

发布于
2022-05-23

更新于
2022-05-23

Element.scrollIntoView()

_XYZ111

492243168

发布于
2022-05-24

更新于
2022-05-24

已解决

通过click事件拿到href
直接给location.href赋值, 滚动条自动滚到指定区域


const windowUrl = location.href

for (data of partDynamicDataTraverse.list) {
  partDynamicDataTraverse.$element.append(`
      <li><div class="item" href=${data.href}>${data.name}</div></li>
  `)
}

$(".item").each(function() {
  $(this).click(function() {
      location.href = windowUrl + $(this).attr("href")
  })
})

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

不使用a标签, 如何实现在页面中位置跳转?

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？