teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

イメージを追加

2020/09/27 10:43

投稿

shiramiso
shiramiso

スコア25

title CHANGED
File without changes
body CHANGED
@@ -6,10 +6,11 @@
6
6
  当然ながら「もっと見る」ボタンの上に要素が追加されるのですが
7
7
  画面が「もっと見る」ボタンについていってしまい、
8
8
  スクロール位置的に画面が下に移動したような形になってしまいます。
9
+ ![現状](3bfcd50f67f1b56d8b69577e336dd8a7.jpeg)
9
10
 
10
11
  【理想】
11
12
  ボタンを押してもスクロール位置はそのままでいてほしい
12
-
13
+ ![理想](5947a5bf2c58b04d3114f29d25da1c2b.jpeg)
13
14
  ```html
14
15
  <ul class="new-post">
15
16
  <li>

1

ソースをついか

2020/09/27 10:43

投稿

shiramiso
shiramiso

スコア25

title CHANGED
File without changes
body CHANGED
@@ -8,4 +8,75 @@
8
8
  スクロール位置的に画面が下に移動したような形になってしまいます。
9
9
 
10
10
  【理想】
11
- ボタンを押してもスクロール位置はそのままでいてほしい
11
+ ボタンを押してもスクロール位置はそのままでいてほしい
12
+
13
+ ```html
14
+ <ul class="new-post">
15
+ <li>
16
+ <a hred=""><img></a>
17
+ </li>
18
+ <li>
19
+ <a hred=""><img></a>
20
+ </li>
21
+ <li>
22
+ <a hred=""><img></a>
23
+ </li>
24
+ <li>
25
+ <a hred=""><img></a>
26
+ </li>
27
+ <li>
28
+ <a hred=""><img></a>
29
+ </li>
30
+ <li>
31
+ <a hred=""><img></a>
32
+ </li>
33
+ <li class="is-hidden">
34
+ <a hred=""><img></a>
35
+ </li>
36
+ <li class="is-hidden">
37
+ <a hred=""><img></a>
38
+ </li>
39
+ <li class="is-hidden">
40
+ <a hred=""><img></a>
41
+ </li>
42
+ <li class="is-hidden">
43
+ <a hred=""><img></a>
44
+ </li>
45
+ <li class="is-hidden">
46
+ <a hred=""><img></a>
47
+ </li>
48
+ <li class="is-hidden">
49
+ <a hred=""><img></a>
50
+ </li>
51
+ </ul>
52
+ <a class="more" href="#">もっと見る</a>
53
+ ```
54
+ ```css
55
+ .new-post {
56
+ display: flex;
57
+ justify-content: space-between;
58
+ flex-wrap: wrap;
59
+ }
60
+ .new-post li{
61
+ opacity: 1;
62
+ transition: all 0.4s ease 0s;
63
+ width:33%;
64
+ height:auto;
65
+ }
66
+ .new-post li.is-hidden {
67
+ display:none;
68
+ }
69
+ ```
70
+
71
+ ```javascript
72
+ //もっと見るボタン
73
+ var moreNum = 6;
74
+ $('.new-post li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
75
+ $('.more').on('click', function() {
76
+ $('.new-post li.is-hidden').slice(0, moreNum).removeClass('is-hidden');
77
+ if ($('.new-post li.is-hidden').length == 0) {
78
+ $('.more').fadeOut();
79
+ }
80
+ return false;
81
+ });
82
+ ```