<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が
リストの先頭にスクロールするするサンプルを試しに作成してみました。
Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに
微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる
にはどのようにすればよろしいでしょうか。
【サンプル】
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="../jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.update-scroll li").click(function() {
$("ul.update-scroll li").each(function(){
// 既に選択済の場合、選択を解除
if( $(this).hasClass("selected") ) {
//alert( $(this).text() );
$(this).toggleClass("selected");
}
});
// 選択済に変更
$(this).toggleClass("selected");
// 選択済の位置がリストの先頭に来るようにスクロール
//var i = $(this).index();
var p = $(this).offset().top;
//alert(p);
$("ul.update-scroll").animate({ scrollTop: p }, "fast");
});
});
</script>
<title>CSS</title>
<style type="text/css">
ul.update-scroll {
list-style-type: none;
width: 400px;
height: 100px;
overflow-y: scroll;
border: 2px solid #bbb;
padding-left: 1.5em;
}
ul.update-scroll li {
margin-top: 0.3em;
}
ul.update-scroll li.selected {
background:red;
}
ul.update-scroll a {
text-decoration: none;
}
</style>
</head>
<body bgcolor="rgba(255,0,0,0.15)">
<ul class="update-scroll">
<li>[2010/01/03]: <a href="javascript:void(0);">項目10</a></li>
<li>[2010/01/03]: <a href="javascript:void(0);">項目9</a></li>
<li>[2010/01/03]: <a href="javascript:void(0);">項目8</a></li>
<li>[2010/01/03]: <a href="javascript:void(0);">項目7</a></li>
<li>[2010/01/03]: <a href="javascript:void(0);">項目6</a></li>
<li>[2010/01/03]: <a href="javascript:void(0);">項目5</a></li>
<li>[2010/01/03]: <a href="javascript:void(0);">項目4</a></li>
<li>[2010/01/03]: <a href="javascript:void(0);">項目3</a></li>
<li>[2010/01/02]: <a href="javascript:void(0);">項目2</a></li>
<li>[2010/01/01]: <a href="javascript:void(0);">項目1</a></li>
</ul>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptでEnterキーをtabキ...
-
jqueryのsortableで一部ソート...
-
ページの上下に同じタブメニュ...
-
同一ページ内で、任意の文字列...
-
【jQuery】 if else 文の合体
-
JQueryタブのアクティブ アン...
-
textareaに画像を表示したい
-
getElementByIdの戻り値がnull...
-
CSSで指定したwidthをマウスで...
-
HPで写真をクリックすると次の...
-
MAX関数を使ってからLEFT JOIN...
-
デフォルト非表示にしたい。【t...
-
クリックで色変更後に既に変更...
-
WEBページ立ち上げ時に1回のみ...
-
c++std::string型をTCHARに変換...
-
[急ぎ] videoタグで埋め込んだm...
-
クリックすると隠れたテキスト...
-
読み込んだQRコードをフォーム...
-
IFRAMEの表示/非表示を切り替え...
-
VBScriptでXMLのデータを取得す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
jQueryのeqで最後からn番目以降...
-
チェックボックスに入っている...
-
「jQuery」アコーディオンメニ...
-
クリックした<a>タグのみにClas...
-
javascriptでEnterキーをtabキ...
-
【JQuery】アコーディオンの入...
-
タブ切り替えの初期表示について
-
jQueryでネスト構造の<li>がク...
-
どの<li><a> が押されたか判別...
-
大量のチェックボックス状態取...
-
フルスクリーンについて・・・
-
jQueryのhide,showで中の要素が...
-
【jQuery】遅延実行(タイムラ...
-
アコーディオン自動開閉メニュ...
-
jQueryで表示する吹き出しdivの...
-
JqueryFileTree.js でフォルダ...
-
タブ切り替えの初期表示に関して
おすすめ情報