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

回答編集履歴

2

追記

2017/08/14 18:28

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -65,4 +65,74 @@
65
65
  </script>
66
66
  </body>
67
67
  </html>
68
+ ```
69
+ 追記
70
+ ---
71
+ ```HTML
72
+ <!DOCTYPE html>
73
+ <html lang="ja">
74
+ <head>
75
+ <meta charset="UTF-8">
76
+ <title>タイトル</title>
77
+ <style type="text/css">
78
+ * {
79
+ margin: 0;
80
+ padding: 0;
81
+ }
82
+
83
+ .maincontets {
84
+ height: 5000px;
85
+ background-color: #eee;
86
+ }
87
+
88
+ .nav {
89
+ margin-top: 700px;
90
+ background-color: #ddd;
91
+ }
92
+
93
+ .footer {
94
+ background-color: #ccc;
95
+ height: 300px;
96
+ }
97
+
98
+ .pagetop {
99
+ display: none;
100
+ position: fixed;
101
+ bottom: 10%;
102
+ margin-top: -30px;
103
+ right: 10px;
104
+ }
105
+ </style>
106
+ </head>
107
+ <body>
108
+ <div class="wrapper">
109
+ <ul class="nav">
110
+ <li><a href="">ナビ</a></li>
111
+ <li><a href="">ナビ</a></li>
112
+ <li><a href="">ナビ</a></li>
113
+ </ul>
114
+ <div class="maincontets">
115
+ メインコンテンツ
116
+ </div>
117
+ <div class="footer">
118
+ フッター
119
+ </div>
120
+ <div class="pagetop">トップへもどる</div>
121
+ </div>
122
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
123
+ <script>
124
+ $(window).scroll(function () {
125
+ var navTop = $(".nav").offset().top;
126
+ var footerTop = $(".footer").offset().top;
127
+ var scrollPosition = $(window).scrollTop();
128
+
129
+ if ($(window).height() + scrollPosition < footerTop && scrollPosition > navTop) {
130
+ $(".pagetop").fadeIn();
131
+ } else {
132
+ $(".pagetop").fadeOut();
133
+ }
134
+ });
135
+ </script>
136
+ </body>
137
+ </html>
68
138
  ```

1

修正

2017/08/14 18:28

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -1,7 +1,7 @@
1
1
  的外れかもしれませんが、以下のように行ってみてはいかがでしょうか?
2
2
  ```HTML
3
3
  <!DOCTYPE html>
4
- <html lang="en">
4
+ <html lang="ja"><!-- 修正 -->
5
5
  <head>
6
6
  <meta charset="UTF-8">
7
7
  <title>タイトル</title>
@@ -64,4 +64,5 @@
64
64
  });
65
65
  </script>
66
66
  </body>
67
- </html>
67
+ </html>
68
+ ```