Question

我有一个启用了部分滚动功能的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();

现在，每次点击即可重新加载网站，但它可以正常工作。那不是我想要的。

Answer 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;
}

按钮跳转到下一个锚点

1 个答案: