質問編集履歴
1
質問内容の変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
ページ
|
|
1
|
+
jQueryでページの最下部の位置を取得する方法。
|
test
CHANGED
|
@@ -10,41 +10,13 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
###発生している問題・エラーメッセージ
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
そのためにページの最下部の位置を取得したいです。
|
|
16
14
|
|
|
17
15
|
|
|
18
16
|
|
|
19
|
-
|
|
17
|
+
###発生している問題・エラーメッセージ
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
ページ最下部の位置を取得できない。
|
|
22
|
-
|
|
23
|
-
B.しばらくbottom:0でおとなしくしている→
|
|
24
|
-
|
|
25
|
-
C.想定外の位置でbottomがずれる→
|
|
26
|
-
|
|
27
|
-
フッターに達するとちょうどよい位置ですが→
|
|
28
|
-
|
|
29
|
-
一度上の方にスクロールしたりページトップへをクリックしたりすると→
|
|
30
|
-
|
|
31
|
-
A.B.C.を繰り返した後→
|
|
32
|
-
|
|
33
|
-
フッターを無視して一番下（ウィンドウ最下部）でベタ着きしたり、
|
|
34
|
-
|
|
35
|
-
一番下まで行ってからbottom位置が上に移動したり、
|
|
36
|
-
|
|
37
|
-
そのあとしばらくその位置でうずくまっていたり→
|
|
38
|
-
|
|
39
|
-
リロードごと・スクロールごとに挙動が変わる。
|
|
40
|
-
|
|
41
|
-
ウィンドウサイズを変更した時や、
|
|
42
|
-
|
|
43
|
-
PC/SPのブラウザによっても挙動が変わる。
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
というような状況です。挙動不審です。
|
|
48
20
|
|
|
49
21
|
|
|
50
22
|
|
|
@@ -56,55 +28,7 @@
|
|
|
56
28
|
|
|
57
29
|
###該当のソースコード
|
|
58
30
|
|
|
59
|
-
```HTML
|
|
60
31
|
|
|
61
|
-
<!-- ▽ メインコンテンツここから ▽ -->
|
|
62
|
-
|
|
63
|
-
<main style=" width: 100%; height: 2000px;">
|
|
64
|
-
|
|
65
|
-
ダミーメインです。ダミーコンテンツです。
|
|
66
|
-
|
|
67
|
-
</main>
|
|
68
|
-
|
|
69
|
-
<!-- △ メインコンテンツここまで △ -->
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<!-- ページトップ -->
|
|
74
|
-
|
|
75
|
-
<div id="pagetop"><a href="#"><span>ページトップへ</span></a></div>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<!-- ▼ フッターここから ▼ -->
|
|
80
|
-
|
|
81
|
-
<footer>
|
|
82
|
-
|
|
83
|
-
<div id="copyright"><p>Copyright All rights reserved.</p></div>
|
|
84
|
-
|
|
85
|
-
</footer>
|
|
86
|
-
|
|
87
|
-
<!-- ▲ フッターここまで ▲ -->
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
```CSS
|
|
94
|
-
|
|
95
|
-
footer { position: relative; width: 100%; height: 180px; background: #00244B;}
|
|
96
|
-
|
|
97
|
-
footer #copyright { position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; line-height: 15px; text-align: center; background: #A9925C;}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
#pagetop { position: fixed; bottom: 0; right: 10px; width: 90px; height: 50px; border-radius: 20px 20px 0 0; background: #00244B; z-index: 100;}
|
|
102
|
-
|
|
103
|
-
#pagetop a { display: block; width: 100%; height: 100%; text-align: center; color: #fff; font-size: 12px;}
|
|
104
|
-
|
|
105
|
-
/*#pagetop a span {矢印が入ります。省略します。}*/
|
|
106
|
-
|
|
107
|
-
```
|
|
108
32
|
|
|
109
33
|
```javascript
|
|
110
34
|
|
|
@@ -112,43 +36,7 @@
|
|
|
112
36
|
|
|
113
37
|
$(document).ready(function() {
|
|
114
38
|
|
|
115
|
-
var pagetop = $('#pagetop');
|
|
116
|
-
|
|
117
39
|
pagetop.hide();
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
$(window).scroll(function () {
|
|
122
|
-
|
|
123
|
-
if ($(this).scrollTop() > 650) {
|
|
124
|
-
|
|
125
|
-
pagetop.fadeIn();
|
|
126
|
-
|
|
127
|
-
} else {
|
|
128
|
-
|
|
129
|
-
pagetop.fadeOut();
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
pagetop.click(function () {
|
|
136
|
-
|
|
137
|
-
$('body, html').animate({ scrollTop: 0 }, 500);
|
|
138
|
-
|
|
139
|
-
return false;
|
|
140
|
-
|
|
141
|
-
});
|
|
142
|
-
|
|
143
|
-
//ここまでは正常に動く。よくある普通のページトップ。
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
//ここからの動きが非常に怪しい。
|
|
148
|
-
|
|
149
|
-
var scrollBottom;
|
|
150
|
-
|
|
151
|
-
var lastTop = $("#copyright").offset().top;
|
|
152
40
|
|
|
153
41
|
|
|
154
42
|
|
|
@@ -156,29 +44,35 @@
|
|
|
156
44
|
|
|
157
45
|
var x = 767;
|
|
158
46
|
|
|
47
|
+
var bottomStop = $('body').height();//ここでページ全体の高さを取得したい
|
|
48
|
+
|
|
159
49
|
|
|
160
50
|
|
|
161
51
|
function getScrollTop(){
|
|
162
52
|
|
|
163
|
-
|
|
53
|
+
if ($(this).scrollTop() > 650){
|
|
164
54
|
|
|
55
|
+
pagetop.fadeIn().css('bottom', '0');
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
//「スクロール量がページの最下部に達したら」と書いているつもりだが…
|
|
60
|
+
|
|
165
|
-
if(scroll
|
|
61
|
+
} else if ($(this).scrollTop() >= bottomStop){
|
|
166
62
|
|
|
167
63
|
if (w <= x) {//ウィンドウサイズが767px以下の場合（SP）
|
|
168
64
|
|
|
169
|
-
pagetop.s
|
|
65
|
+
pagetop.css('bottom', '180px');
|
|
170
66
|
|
|
171
67
|
} else {//ウィンドウサイズが768px以上の場合（PC)
|
|
172
68
|
|
|
173
|
-
pagetop.s
|
|
69
|
+
pagetop.css('bottom', '450px');
|
|
174
|
-
|
|
175
|
-
//（PCの場合はfooterの高さが450px・#copyrightの高さが30pxになります。）
|
|
176
70
|
|
|
177
71
|
}
|
|
178
72
|
|
|
179
|
-
} else{
|
|
73
|
+
} else {
|
|
180
74
|
|
|
181
|
-
pagetop.
|
|
75
|
+
pagetop.fadeOut();
|
|
182
76
|
|
|
183
77
|
}
|
|
184
78
|
|
|
@@ -186,9 +80,17 @@
|
|
|
186
80
|
|
|
187
81
|
$(window).on("load scroll resize", getScrollTop);
|
|
188
82
|
|
|
189
|
-
});
|
|
190
83
|
|
|
191
84
|
|
|
85
|
+
pagetop.click(function () {
|
|
86
|
+
|
|
87
|
+
$('body, html').animate({ scrollTop: 0 }, 500);
|
|
88
|
+
|
|
89
|
+
return false;
|
|
90
|
+
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
});
|
|
192
94
|
|
|
193
95
|
|
|
194
96
|
|
|
@@ -196,14 +98,4 @@
|
|
|
196
98
|
|
|
197
99
|
###試したこと
|
|
198
100
|
|
|
199
|
-
本当は#copyrightまで行かずに、footerに到達した時点で固定されるほうがいいのかもしれない。
|
|
200
|
-
|
|
201
|
-
どちらにせよ挙動が不安定すぎて、使い物にならない。
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
なんとなく正しく制動する時もあるので、スクリプトの書き方は合っているのか・・？
|
|
206
|
-
|
|
207
|
-
|
|
101
|
+
挙動不審については無事解決いたしました。
|
|
208
|
-
|
|
209
|
-
どなたか分かる方いらっしゃいましたら、ご教授をお願いします。
|