个人中心
gpt4 book ai didi

javascript - 如何修复 anchor 标签着陆在错误位置的问题

转载 作者：行者123 更新时间：2023-12-03 06:44:17 24 4
gpt4 key购买 nike

我是 JavaScript 新手。抱歉，如果这是重复的，但我找不到任何满足我需求的解决方案。

当点击 anchor 标签时，它会引导到我想要的位置。但是，我有另一个 anchor 标记，旨在链接到与另一个 anchor 标记相同的位置。如果我单击此按钮(在我已经单击了另一个 anchor 标记，该 anchor 标记与我现在要单击的位置相同)，它不会引导我到达所需的位置。

我知道这一定是因为我正在使用 hashchange。我尝试使用 click 但在使用 hashchange< 时返回 -1 for console.log(document.URL.indexOf(“#”)); 而不是 58/.

我认为点击逻辑是在正确的路径上，但我不明白为什么它没有达到我的预期。 (即:点击页面上可点击的内容后，点击运行)。

我还尝试使用 setTimeout 但我无法找到一种方法来正确操作它来“重新启动”我的 fixedAnchor 函数。 

    function fixedAnchor() {
        // if (location.hash.length !== 0) {
            window.scrollTo(window.scrollX, window.scrollY - 130);
            console.log(document.URL.indexOf("#"));
            // console.log(document.URL.indexOf("#") > -1 & document.URL.indexOf("#") <= 58);
            // if (document.URL.indexOf("#") > -1 & document.URL.indexOf("#") < 58) {
            //  console.log(document.URL.indexOf("#") > -1);
                offSetAnchor();
            // }
        // }
    }

    function offSetAnchor() {
        if (document.URL.indexOf("#") != 58){
            window.scrollTo(window.scrollX, window.scrollY - 130);
        }
        // setTimeout(function(){
        //  window.scrollTo(window.scrollX, window.scrollY - 130);
        //  // fixedAnchor();
        // }, 1000);
    }

    window.addEventListener('hashchange', fixedAnchor);
    // window.addEventListener('click', fixedAnchor);

最佳答案

这可以通过仅使用 HTML 的命名 anchor 来完成。请查找下面的代码，其中 2 个链接位于同一位置

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <a href="#gohere">click 1 to gohere</a>
    <p>Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p><a href="#gohere">click 1 to gohere</a>Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p>Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p>Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p id="gohere"> Selected Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

</p>
  </body>

</html>

关于javascript - 如何修复 anchor 标签着陆在错误位置的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37818261/

24 4 0
文章推荐： javascript - 多个 显示更多/显示更少
文章推荐： json - Spring 休息: HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8'
文章推荐： assembly - 寄存器寻址模式 vs 直接寻址模式
文章推荐： javascript - 为什么 multer 看不到我的发布请求中的任何文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com