2012-01-18 11 views
0

私はなぜスクロールしてアンカーにスクロールしないのですか?

<!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> 

なぜ歓迎/ガイドラインのリンクをクリックすると、アンカーにスクロールしませんか?

jquery-bbqを使用しているため、具体的にidにリンクしようとしています。(私が知る限りは)ハッシュ/アンカーを使用できません。

私はコードを説明するために多くの文字を使用しています。どのように我々は一つのフレームのパックマンをプレイについて:

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

Welcom」だけではないのはなぜですか? – RobG

+0

ちょっとロブ - 最新の追加を参照してください。これはjquery-bbqのクォーク/トレードオフです。明らかに、ハッシュはあるものに使用されていますので、これ以外のものは使用できません。つまり、jquery-bbqはそれらを他のものに使用するためです。だから、私は回避策を見つけなければなりません - まず 'scrollTo()'を試しています。 – lakitu

答えて

1

それはブラウザがElement.scrollTo機能を実行し、ページの一番上に移動しますリンクを...次されている可能性があります(href以降は#です)。

なぜこれらの2つのいずれかを試してみて、何が起こるかを参照してください。

onclickからreturn false;を試してみてください(see fiddle here

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

...からその値を返します10:2つの提案のいずれかを行うには、

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

Element.scrollToがリンクの元の宛先に従わず効果を取ることができるようにすべきです。

+0

'Welcome
Guidelines'は機能しませんでした。私は他の方法を試してみます。 – lakitu

+0

が機能しませんでした。私がEgg Throwerを使ってページにいくつかの卵を投げるのに役立つならば、P – lakitu

+0

私が何を話しているかを実証するためにフィドルを作成しました。こちらをご覧ください:http://jsfiddle.net/GWLmy/1/。それでも問題が解決しない場合は、より多くの情報を提供する必要があります。 –

関連する問題