Javascript(jQuery)でのスムーズスクロールについて質問です。

下記のようにAタグを押して、idの位置へのスムーズスクロールは実装できたのですが、
Javascriptから実行してidへのスムーズスクロールが出来ません。
どなたかご教授願います。m(_ _)m

//--- これならできた-------------
<a id="point1"></a>
<a href="#point1">point1に移動</a>

//--- こんな感じにしたい。---------
function scroll() {
point1への移動処理
}
<a href="javascript:void(0)" onclick="scroll();">

参考ページ
http://coliss.com/wp-content/uploads-2009/page-scroller-306/demo-2.html

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/15 14:52:11
  • 終了:2010/12/15 21:57:31

ベストアンサー

id:asuka645 No.1

あすか回答回数856ベストアンサー獲得回数972010/12/15 16:24:30

ポイント100pt

jQueryを利用するという前提ですよね。

下記のような形でいかがでしょうか。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
<!--
function hoge(id) {
    oftop = $('#' + id).offset().top;
    $("html,body").animate({scrollTop: oftop}, 'slow');
    return false;
}
-->
</script>
</head>
<body>
<a href="#" id="point0" onclick="hoge('point1')" style="position:absolute; top:   0px;">原点</a>
<a href="#" id="point1" onclick="hoge('point2')" style="position:absolute; top: 500px;">一番</a>
<a href="#" id="point2" onclick="hoge('point3')" style="position:absolute; top:1000px;">二番</a>
<a href="#" id="point3" onclick="hoge('point4')" style="position:absolute; top:1500px;">三番</a>
<a href="#" id="point4" onclick="hoge('point0')" style="position:absolute; top:2000px;">四番</a>
</body>
</html>
id:pikab1

さっそくありがとうございます!!

まさに知りたかった答えです!ありがとうございました!m(_ _ )m

2010/12/15 21:56:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません