質問編集履歴
2
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
|
|
7
7
|
現在、htmlとアコーディオンを動かすためのJAVAスクリプトとして下記のものを使っています。
|
|
8
8
|
|
|
9
|
-
(html)
|
|
10
9
|
```html5
|
|
11
10
|
<ul class="accordion">
|
|
12
11
|
<li>
|
1
誤字、書式の修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
アコーディオンを閉じる時にアコーディオンタブの位置にページが飛ぶための方法
|
body
CHANGED
|
@@ -2,29 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
を使って、アコーディオン内をアコーディオンの開閉タブが画面のスクロールに合わせてついてくるように作りました。しかしアコーディオンを閉じるとアコーディオンだけが閉じられ、表示されている画面は移動しないため、アコーディオンを開いている時にスクロールしていた分だけアコーディオン下部にあるコンテンツが表示され、ユーザーは現在位置が分からくなります。
|
|
4
4
|
|
|
5
|
-
そこで、アコーディオンを閉じた時にアコーディオンを閉じると同時に開閉タブの
|
|
5
|
+
そこで、アコーディオンを閉じた時にアコーディオンを閉じると同時に開閉タブの位置にジャンプしてユーザーが現在位置を見失わいようにしたいです。
|
|
6
6
|
|
|
7
7
|
現在、htmlとアコーディオンを動かすためのJAVAスクリプトとして下記のものを使っています。
|
|
8
8
|
|
|
9
9
|
(html)
|
|
10
|
+
```html5
|
|
10
|
-
|
|
11
|
+
<ul class="accordion">
|
|
11
|
-
|
|
12
|
+
<li>
|
|
12
|
-
|
|
13
|
+
<p class="top"><span>アコーディオン開閉タブ</span></p>
|
|
13
|
-
|
|
14
|
+
<table>
|
|
14
|
-
|
|
15
|
+
<tbody>
|
|
15
|
-
|
|
16
|
+
<tr>
|
|
16
|
-
|
|
17
|
+
<td>
|
|
17
|
-
|
|
18
|
+
<ul>
|
|
18
|
-
|
|
19
|
+
<li>アコーディオン内項目</li>
|
|
19
|
-
|
|
20
|
+
</ul>
|
|
20
|
-
|
|
21
|
+
</td>
|
|
21
|
-
|
|
22
|
+
</tr>
|
|
22
|
-
|
|
23
|
+
</tbody>
|
|
23
|
-
|
|
24
|
+
</table>
|
|
24
|
-
|
|
25
|
+
</li>
|
|
25
|
-
|
|
26
|
+
</ul>
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
```
|
|
28
|
+
```javascript
|
|
28
29
|
$(function(){
|
|
29
30
|
$(location.hash).show();
|
|
30
31
|
$(".accordion p").click(function(){
|
|
@@ -49,7 +50,14 @@
|
|
|
49
50
|
}
|
|
50
51
|
});
|
|
51
52
|
});
|
|
52
|
-
|
|
53
|
+
```
|
|
54
|
+
```css3
|
|
55
|
+
.accordion p.top{
|
|
56
|
+
position: -webkit-sticky;
|
|
57
|
+
position: sticky;
|
|
58
|
+
top: 0;
|
|
59
|
+
}
|
|
60
|
+
```
|
|
53
61
|
これに対して、開閉タブの部分にid(tub)を設置し、
|
|
54
62
|
<p class="top"><span id="tub">アコーディオン開閉タブ</span></p>
|
|
55
63
|
アコーディオンを開いている状態で、開閉タブを押すとアコーディオンを閉じると同時に、設置したidの部分に飛ぶようにしたいのですが、JAVAスクリプトをどう直せばいいでしょうか？
|