转到下一个锚点按钮 [英] Goto Next Anchor Button
问题描述
我在顶部设置了一些锚点和一个小菜单。当我单击一个菜单项时，它将滚动到该锚点。
I have set up some anchors and a little menu up top. when I click a menu item, it will scroll to that anchor.
我想要做的是在菜单上有一个下一个箭头来确定我页面上的下一个锚点onClick滚动到它。
what I want to do is have a next arrow on the menu to determine the next anchor on my page and scroll to it onClick.
我的主播是＃header，＃box1 - ＃box5
My anchors are #header, #box1 - #box5
我想要如果可能的话，用JavaScript做。
这是我的页面
我的页面
I would like to do it with JavaScript if possible.
here is my page
My Page
推荐答案
有一个名为 document.anchors 的HTML集合。要转到下一个锚点，请从URL获取当前锚点名称，然后在 document.anchors 中查找。如果你找到它，下一个将是下一个索引。如果您在最后一个索引处，请将锚点设置为第一个索引。否则，如果没有匹配，只需将其设置为第一个。
There is an HTML collection called document.anchors. To go to the next anchor, get the current anchor name from the URL and look for it in document.anchors. If you find it, the next one will be the next index. If you're at the last index, set the anchor to the first. Otherwise, if there is no match, just set it to the first.
这允许您使用任何方案来命名锚点，它们将按照它们出现的顺序被访问在DOM中。
This allows you to use any scheme for naming anchors, they will be visited in the order they appear in the DOM.
例如
<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>
这篇关于转到下一个锚点按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
