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

Question

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

Answer 1

Assuming you mean relative to a known anchor/item; if you are using jQuery, they have a selector for "Next Sibling"; find the documentation here:

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

I am just running out; otherwise I would build up the full selector for you, but if you don't have an answer later today, I will put it together.

Edit

Actually, based on further reading, I am quessing you are looking for the next anchor relative to the current scroll position on the page... that is a little more work... but is doable... (again, I will try to get on later today to provide the JS).

Edit

These are not 100% complete; but should be enough so you get the general idea. If your page is static content, I would recommend going through the page and caching all offsets on document ready; determining an elements offset can be pretty slow (especially in older browsers).

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

alternatively, if you page has dynamic content and the anchor locations are not fixed within the document, then you would be looking at something closer to

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

Depending on your page, you may need to expand on this idea. Both of the above solutions assume a pretty basic document layout. If you have anything fancy going on with relative/absolute positing, or scrollable divs etc, you will need to beef this up (I can provide code if that is the case). For now though I am assuming that we are talking about a basic find the anchors on the page, and figure out which anchor would be next based on scroll position. Also, I didn't extensively test, so some polish may also be required :D

Answer 2

Reading your comment to Calgary Coder, I believe - if I understand you correctly - you're looking to find out the anchor in the current URL. You can do this with window.locaiton.hash . Eg

alert(window.location.hash);

Answer 3

Thanks for the answers everyone, but I managed to get this working by implementing http://marcgrabanski.com/articles/scrollto-next-article-button-jquery . This works by going to the next header, rather than the next anchor but I imagine if it's critical to use anchors it could be easily adapted to do so.

Answer 4

I think I understand what you're looking for. If you know the id's you can use this...

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

if you don't know the id's maybe get the anchors by the innerText