Javascript 转到下一个锚按钮_Javascript_Html_Button_Next

Javascript 转到下一个锚按钮

javascript html button

Javascript 转到下一个锚按钮,javascript,html,button,next,Javascript,Html,Button,Next,我在顶部设置了一些锚和一个小菜单。当我单击菜单项时，它将滚动到该锚定我想做的是在菜单上有一个下一个箭头来确定我页面上的下一个锚点，并在单击时滚动到它我的锚点是#header，#box1-#box5 如果可能的话，我想用JavaScript来做。这是我的页面在HTML中使用onClick的内容： <a href="#" onclick="goToNext();return false;">===></a> 更改max您想要的最大数字（对于box1、box2

我在顶部设置了一些锚和一个小菜单。当我单击菜单项时，它将滚动到该锚定

我想做的是在菜单上有一个下一个箭头来确定我页面上的下一个锚点，并在单击时滚动到它

我的锚点是#header，#box1-#box5

如果可能的话，我想用JavaScript来做。这是我的页面

在HTML中使用onClick的内容：

<a href="#" onclick="goToNext();return false;">===></a>

更改

max

您想要的最大数字（对于

box1

、

box2

等）。不确定这是否会保留动画，但您可以查看一个示例。只需查看地址栏。

有一个名为

document.archors的HTML集合。要转到下一个锚点，请从URL获取当前锚点名称，并在document.anchors
中查找它。如果你找到它，下一个将是下一个索引。如果处于最后一个索引，请将锚点设置为第一个。否则，如果没有匹配项，只需将其设置为第一个
这允许您使用任何方案来命名锚点，锚点将按照它们在DOM中出现的顺序进行访问
e、 g

.requireScript块，.requireScript内联{
显示：无；
}
隔套{
高度：500px；
边框：1px纯蓝色；
}
函数goToNextAnchor（）{
var锚=document.anchors；
var loc=window.location.href.replace（/#.*/，''）；
变量nextAnchorName；
//从哈希中获取当前锚点的名称
//如果有
var anchorName=window.location.hash.replace（/#/，“”）；
//如果有锚的名字。。。
如果（主播名称）{
//在锚列表中查找当前元素，然后
//获取下一个锚点名称，或者如果是最后一个锚点，则设置为第一个
对于（变量i=0，iLen=anchors.length；i
var max = 5;

function goToNext() {
    var hash = String(document.location.hash);
    if (hash && hash.indexOf(/box/)) {
        var newh = Number(hash.replace("#box",""));
        (newh > max-1) ? newh = 0 : void(null);
        document.location.hash = "#box" + String(newh+1); 
    } else {
        document.location.hash = "box1";        
    }
}

<head>
<!-- Hide script-dependent content -->
<style type="text/css">
.requiresScript-block, .requiresScript-inLine {
  display: none; 
}
div.spacer {
  height: 500px;
  border: 1px solid blue;
}
</style>
<script type="text/javascript">

function goToNextAnchor() {
  var anchors = document.anchors;
  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;
}

// Display script-dependent content if javascript available
document.write(
  '\u003Cstyle type="text/css"\u003e' +
  '.requiresScript-block {display: block;}' +
  '.requiresScript-inLine {display: inline;}' +
  '\u003C/style\u003e'
);
</script>
</head>
<body>
  <ol>
    <li><a href="#header">Go to header</a>
    <li><a href="#box1">Go to box 1</a>
    <li><a href="#box2">Go to box 2</a>
    <li><a href="#box3">Go to box 3</a>
    <li><a href="#box4">Go to box 4</a>
    <li><a href="#box5">Go to box 5</a>
  </ol>

  <!-- Only shown if javascript available -->
  <button class="requiresScript-inLine" onclick="goToNextAnchor()">Next</button>

  <a name="header"></a><h1>Header</h1>
  <div class="spacer">content</div>
  <p><a name="box1"></a><p>Box 1</p>
  <div class="spacer">content</div>
  <p><a name="box2"></a><p>Box 2</p>
  <div class="spacer">content</div>
  <p><a name="box3"></a><p>Box 3 </p>
  <div class="spacer">content</div>
  <p><a name="box4"></a><p>Box 4</p>
  <div class="spacer">content</div>
  <p><a name="box5"></a><p>Box 5</p>
</body>