人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: ピ
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:href JavaScript jQuery void スクロール
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● あすか
●100ポイント ベストアンサー

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>
◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ