按钮跳转到下一个锚点

Posted 2023-02-25

【中文标题】按钮跳转到下一个锚点

【英文标题】：button to jump to next anchor

【发布时间】：2019-01-15 08:07:55

【问题描述】：

我有一个启用了部分滚动的 wordpress 网站，并添加了 2 个应该跳转到网站上的上一页或下一页的按钮和 2 个应该跳转到网站上的上一章或下一章的按钮。

基于这篇帖子Goto Next Anchor Button 我添加了脚本，但浏览器返回锚点的长度 = 0，document.getElementByTagName() 返回一个很大的数组 并且 document.getElementByName() 也没有用。

var anchordivs = document.querySelectorAll('[data-anchor][data-id]');
var anchors = anchordivs.length;
var loc = window.location.href.replace(/#.*/,'');
var nextAnchorName = 0;

var anchorName = window.location.hash.replace(/#/,'');


if (anchorName)

    for (var i=0, iLength=anchordivs.length; i<iLength; i++) 
        if (anchordivs[i].dataset.anchor == anchorName) 

            nextAnchorName = anchordivs[i+1 % iLength].dataset.anchor;
        break;
        


if (!nextAnchorName)
   nextAnchorName=anchordivs[0].dataset.anchor;


window.location.href = loc + '#' + nextAnchorName;

点击按钮后，网站应滚动到网站的下一部分。

编辑：wordpress 确实在各自的 div 中创建了锚点作为数据锚点： <div ... data-anchor="c_home">。这是仍然不起作用的。单击该按钮时，站点不会跳转到新的锚点，并且在浏览器的地址行中手动输入锚点也不起作用。 JS 代码已经过测试，现在可以使用了。

也许缺少跳转的问题是它都在一页上？

我通过将最后一个代码行更改为以下内容来使其工作：

location.href ='#' + nextAnchorName;
location.reload();

现在每次点击都会重新加载网站，但它可以工作。这不是我想要的。

【参考方案1】：

我改变了var anchors = document.body.getElementsByTagName("a");和nextAnchorName = anchors[i++ % iLen].name;

function goToNextAnchor() 
  var anchors = document.body.getElementsByTagName("a");
  var loc = window.location.href.replace(/#.*/,'');
  var nextAnchorName;

  // Get name of the current anchor from the hash
  // if there is one
  var anchorName = window.location.hash.replace(/#/,'');

  // If there is an anchor name...
  if (anchorName) 

    // Find current element in anchor list, then
    // get next anchor name, or if at last anchor, set to first
    for (var i=0, iLen=anchors.length; i<iLen; i++) 
      if (anchors[i].name == anchorName) 
        nextAnchorName = anchors[i++ % iLen].name;
        break;
      
    
  

  // If there was no anchorName or no match,
  // set nextAnchorName to first anchor name
  if (!nextAnchorName) 
    nextAnchorName = anchors[0].name;
  

  // Go to new URL
  window.location.href = loc + '#' + nextAnchorName;

【讨论】：

我试过了，但是使用按钮时 nextAnchorName 返回“未定义”。

我在网站本身上看到它，使用按钮时：127.0.0.1:8080/wordpress/#undefined 不幸的是，firefox 和 chromium 都不想向我显示变量的值

我的锚点被隐藏了，我在 div 部分找到了它们：。我可以访问这个数据锚点吗？

@Zehke 是的。如果您可以访问href 标签，请改用window.location.href = loc + '#' + nextAnchorName;

按钮大部分工作，循环工作，地址行正确更新。唯一没有发生的事情是，单击按钮时，按钮不会滚动到下一个 div-data-anchor