Question

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

点击锚标签时，它会指向我想要的位置。但是，我有另一个锚标记，用于链接到与另一个相同的位置。如果我点击这个（在我已经点击了另一个锚标签，它导致与我现在要点击的那个位置相同的位置），它不会引导我到我想要的位置。

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

我认为click逻辑在正确的道路上，但我不明白为什么它没有按照我的预期行事。（那就是：点击页面上可点击的内容后点击运行。）

我也尝试过使用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);

Answer 1

这可以使用仅使用HTML的命名锚来完成。请在下面找到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>

Answer 2

这对jQuery的.click()事件处理程序非常有用。您可以为锚元素创建锚类并绑定.click()事件。

$(".anchor").click(function(){
    window.scrollTo(0, 130)
})

这是a working example。

你可以在没有addEventListener('onClick')的jQuery的情况下做类似的事情。

如何修复锚标签在错误的位置

2 个答案: