按钮跳转到下一个锚(button to jump to next anchor)

2019-09-28 00:41发布

我启用了一个WordPress,网站,部分滚动并添加2个按钮应该跳到上或网站上的一个页面,2个按钮应该跳转到网站上一个或下一个章节。

基于这个帖子转到接下来锚点按钮我添加的脚本,但浏览器返回长度= 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"> 以下是仍然无法正常工作。 在点击该按钮的网站没有跳转到新的锚并在浏览器的adressline手动输入锚也不起作用。 该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;
}



文章来源: button to jump to next anchor