![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
<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で質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
Jqueryでリストのスクロール
-
jquery ドロップダウンメニュー...
-
質問に答えていくと、回答によ...
-
どの<li><a> が押されたか判別...
-
ツリーリンク 文字サイズ
-
jqueryプルダウンメニュー個別着色
-
jqueryのvalue習得によるhtml書...
-
サイトにコンテンツを並べる際...
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
jspでcssが読み込めない
-
JavaScriptで変更した属性の元...
-
JavaScriptでボタンをクリック...
-
曜日と時間を指定して表示画像...
-
eclipseでcssを使うためには?
-
JSPでの画像ファイル表示
-
iframe内のリンクが飛ばないの...
-
libjpegライブラリの使い方につ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
Jquery タブで、4つのliのうち...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
jqueryプルダウンメニュー個別着色
-
JavaScript インクリメントの書...
-
複数の画像をランダム(シャッ...
-
タブ切り替えの初期表示について
おすすめ情報