Question

我有

<!DOCTYPE html>
<html>
<head>

[...]

<script type="text/javascript" src="jquery-1.7.js"></script>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript">
function getusto(anchorid) {
$(anchorid).scrollTo();
} 

</script>

[...]

</head>
<body>

[...]

<a class="menu_links" href="#" onclick="getusto('welcome');">Welcome</a><br> 
<a class="menu_links" href="#" onclick="getusto('guidelines');">Guidelines</a> 

[...]

<a name="welcome" id="welcome"></a> blah balhb albha 

[...]

<a name="guidelines" id="guidelines"></a> blah blahb alhb

[...]

</body>
</html>

为什么单击欢迎/指南链接不会滚动到锚点？

我试图特别链接到id，因为使用了jquery-bbq（据我所知）所以我不能正常使用哈希/锚。

他们让我用更多的字符来解释代码。我们如何玩一个框架pac-man：

("< . . . . o . . . . 
                    . 
                    .
                    .
                    .
             [Post Your Answer]

Answer 1

浏览器可能正在执行Element.scrollTo功能，然后按照链接...将您带到页面顶部（因为href为#）。

为什么不尝试这两件事之一，看看会发生什么：

从return false; :( see fiddle here）

中试试onclick

<a class="menu_links" href="#" onclick="getusto('welcome'); return false;">Welcome</a>
<a class="menu_links" href="#" onclick="getusto('guidelines'); return false;">Guidelines</a>

或者让getusto返回false :( see fiddle here）

function getusto(anchorid) {
  $(anchorid).scrollTo();
  return false;
}

...并从onclick：

返回其值

<a class="menu_links" href="#" onclick="return getusto('welcome');">Welcome</a>
<a class="menu_links" href="#" onclick="return getusto('guidelines');">Guidelines</a>

执行这两项建议中的任何一项都应该允许Element.scrollTo生效，而不必关注链接的原始目的地。

为什么不滚动滚动到我的锚点？

1 个答案: