如何使用HTML和/或JS跳转到下一页锚点？

Question

是否可以使用HTML和/或Javascript自动计算下一页的锚点并跳转到它？

- hrickards

---

“Next” 是指什么意思？是相对于当前滚动位置的下一个最低的相对位置吗？ - Jamie Wong

是的。我正在使用它在一个HTML电子书中，每个章节都设置为自己的锚点，并带有一个浮动页脚，我希望能够在上面放置下一章和上一章按钮。 - hrickards

我认为这是一个公正的问题，不确定为什么会被踩？ - Chris Baxter

你是否正在尝试让用户到达页面底部后自动跳转到下一页？ - Starx

不是真的。我有一个长页面，分成不同的部分，每个不同的部分都有一个锚点。我在页面底部有一个浮动页脚，我想在上面放一个下一页按钮。这需要获取当前滚动位置，从中找出当前的锚点，并跳转到该锚点之后的下一个锚点。 - hrickards

Answer 1

假设您是相对于已知的锚点/项；如果您正在使用jQuery，则它们有一个名为“Next Sibling”的选择器；在此处查找文档：

http://api.jquery.com/next-siblings-selector/

我现在有点忙，否则我会为您建立完整的选择器，但如果您今天晚些时候没有答案，我会把它组合起来。

编辑

实际上，根据进一步阅读，我猜测您正在寻找相对于页面当前滚动位置的下一个锚点...这需要更多的工作...但是可以完成...(再次，我将尝试在今天晚些时候提供JS)。

编辑

这些不是100％完整的；但应该足以让您了解基本思路。如果您的页面是静态内容，则建议在文档准备就绪时遍历页面并缓存所有偏移量；确定元素的偏移量可能会非常慢（特别是在旧版浏览器中）。

var _anchorOffets = {};

$(document).ready(function () {
  $("A[id]:not(A[href])").each(function (index, value) {
    var $anchor = $(value);
    _anchorOffets[$anchor.attr("id")] = $anchor.offset().top;
  });
});

function getNextAnchorId() {
  var $window = $(window);
  var minOffset = $window.scrollTop() + $window.height();

  for (var anchor in _anchorOffets) {
    if (_anchorOffets[anchor] >= minOffset) {
      return anchor;
    }
  }

  return null;
}

或者，如果您的页面具有动态内容并且锚点位置不固定在文档中，则您需要考虑更接近于以下内容：

function getNextAnchorId() {
  var result = null;

  $("A[id]:not(A[href])").each(function (index, value) {
    var $anchor = $(value);
    var $window = $(window);
    var minOffset = $window.scrollTop() + $window.height();

    if($anchor.offset().top >= minOffset) {
      result = $anchor.attr("id");
      return false;
    }
  });

  return result;
}

根据您的页面，您可能需要扩展这个想法。上述两种解决方案都假定文档布局相当基本。如果您使用相对/绝对位置或可滚动的div等进行任何高级操作，则需要加强此功能（如果需要，我可以提供代码）。不过，现在我假设我们正在谈论基本查找页面上的锚点，并根据滚动位置确定下一个锚点。另外，我没有进行彻底的测试，因此可能还需要一些改进:D

- Chris Baxter

---

抱歉我在问题中没有澄清，我是指相对于当前页面位置。在JQuery中是否有任何可以让您从页面位置获取当前锚点的内容？（我找不到任何东西，但我可能错过了什么。）编辑：好的，谢谢。我可能要等到明天才能回复（我在英国，现在快到晚上了）。 - hrickards

Answer 2

阅读您对卡尔加里编码器的评论，我相信 - 如果我理解正确 - 您正在寻找了解当前URL中的锚点。您可以使用window.location.hash来实现此目的。例如：

alert(window.location.hash);

- Gert Grenander

---

谢谢。唯一的问题是，如果用户向下滚动，他们的URL中将不会有锚点。有没有类似的代码可以根据当前滚动位置找到锚点？ - hrickards

很遗憾，除非他们在您的页面上点击另一个锚点，或者如果您以某种方式强制使锚点在他们通过页面上的某些点时跳转（即使这是可行的，我也不建议采用这种方法... 这可能会给用户带来不流畅的体验）。 - Gert Grenander

但是你可能可以检查滚动位置，类似于这个人所做的方式：http://articles.sitepoint.com/article/preserve-page-scroll-position - Gert Grenander

Answer 3

感谢大家的回答，但我通过实现http://marcgrabanski.com/articles/scrollto-next-article-button-jquery来使其工作。这个方法是通过跳转到下一个标题而不是下一个锚点来实现的，但我想如果必须使用锚点，它可以很容易地进行调整。

- hrickards

---

有趣...有这么多的jQuery插件:D 看起来代码还挺多，但只要能达到效果就够了。不错的发现。 - Chris Baxter

Answer 4

我想我明白你在寻找什么。如果你知道ID，你可以使用这个...

function Next(){
    var lnkNext = document.getElementById("yourNextAnchorId");
    window.location.href = lnkNext.src;
}

如果您不知道ID，可以通过innerText获取锚点。

- Hooger

---

谢谢你的回答，但我已经找到了另一种方法来完成它。 - hrickards