1

我找不到可靠的答案，反复试验让我无处可去。

我正在生成一个动态 PHP 页面，其中包含我的 URL 中的变量，所以我的 URL 如下所示：

http://www.mypage.com/myfile.php?l=1&d=1&c=1

(works)

我还想为此添加一个锚点，例如：

http://www.mypage.com/myfile.php?l=1&d=1&c=1#anchor1
(Does not jump to the anchor at the end)

锚点的目标是一个 div，例如：

<a href = "http://www.mypage.com/myfile.php?l=1&d=1&c=1#anchor1">Some link</a>
<div id = "anchor1"></div>

这可能吗？

4

3 回答 3

2

这应该会更好

<a href="http://www.mypage.com/myfile.php?l=1&d=1&c=1#anchor1">Some link</a>
<div>
    <a name="anchor1"></a>
</div>

请注意，正确的做法取决于您使用的文档类型。您可以在此处阅读有关html5和html 4.01的更多信息

于 2013-08-14T00:15:37.730 回答
0

某些浏览器不会id根据 URL 哈希自动定位您的 . 您可以考虑使用 JavaScript。

var doc = document;
function E(e){
  return doc.getElementById(e);
}
function offset(element){
  var x = 0, y = 0, e = element;
  while(e && !isNaN(e.offsetLeft) && !isNaN(e.offsetTop)){
    x += e.offsetLeft - e.scrollLeft;
    y += e.offsetTop - e.scrollTop;
    e = e.offsetParent;
  }
  return {left: x, top: y};
}
function YourSolution(listId){
  var parentId = E(listId), pcn = parentId.childNodes;
  for(var i=0,l=pcn.length; i<l; i++){
    if(pcn[i].nodeType === 1){
      var ac = pcn[i].childNodes;
      for(var n=0,m=ac.length; n<m; n++){
        var an = ac[n];
        if(an.nodeType === 1){
          an.onclick = function(){
            var el = offset(this);
            scrollTo(el.left, el.top);
          }
        }
      }
    }
  }
}

将上述内容放在名为scroll.js. 现在将以下代码放在您的底部body：

  <script type='text/javascript' src='scroll.js'></script>
  <script type='text/javascript'>
    YourSolution('listId');
  </script>
</body>
</html>
于 2013-08-14T00:05:49.623 回答
0

我想问题是id是动态添加的。

然后，您可以在添加 id 并将元素附加到文档后刷新哈希

var h = location.hash;
location.hash = '';
location.hash = h;

演示：http: //jsfiddle.net/wpMDj/1/show/#anchor

代码：http: //jsfiddle.net/wpMDj/1/

或者，您可以使用scrollIntoView：

document.getElementById(location.hash.substring(1)).scrollIntoView(true);

但是为了避免错误，你需要一些 ifs：

var hash = location.hash.substring(1);
if(hash){
    var el = document.getElementById(hash);
    if(el && el.scrollIntoView){
        el.scrollIntoView(true);
    }
}

演示：http: //jsfiddle.net/wpMDj/3/show/#anchor

代码：http: //jsfiddle.net/wpMDj/3/

于 2013-08-14T00:16:29.287 回答