s8_chu score 14639
2017/08/15 03:28 投稿
| 的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？ |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"><!-- 修正 --> |
| <head> |
| <meta charset="UTF-8"> |
| <title>タイトル</title> |
| <style type="text/css"> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| .maincontets { |
| height: 5000px; |
| background-color: #eee; |
| } |
| .nav { |
| margin-top: 700px; |
| background-color: #ddd; |
| } |
| .footer { |
| background-color: #ccc; |
| height: 300px; |
| } |
| .pagetop { |
| display: none; |
| position: fixed; |
| bottom: 10%; |
| margin-top: -30px; |
| right: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="wrapper"> |
| <ul class="nav"> |
| <li><a href="">ナビ</a></li> |
| <li><a href="">ナビ</a></li> |
| <li><a href="">ナビ</a></li> |
| </ul> |
| <div class="maincontets"> |
| メインコンテンツ |
| </div> |
| <div class="footer"> |
| フッター |
| </div> |
| <div class="pagetop">トップへもどる</div> |
| </div> |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
| <script> |
| $(window).scroll(function () { |
| var navTop = $(".nav").offset().top; |
| var footerTop = $(".footer").offset().top; |
| var scrollPosition = $(window).height() + $(window).scrollTop(); |
| if (scrollPosition < (footerTop - navTop) && scrollPosition > (navTop + 350)) {//修正 |
| $(".pagetop").fadeIn(); |
| } else { |
| $(".pagetop").fadeOut(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
| ``` |
| 追記 |
| --- |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>タイトル</title> |
| <style type="text/css"> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| .maincontets { |
| height: 5000px; |
| background-color: #eee; |
| } |
| .nav { |
| margin-top: 700px; |
| background-color: #ddd; |
| } |
| .footer { |
| background-color: #ccc; |
| height: 300px; |
| } |
| .pagetop { |
| display: none; |
| position: fixed; |
| bottom: 10%; |
| margin-top: -30px; |
| right: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="wrapper"> |
| <ul class="nav"> |
| <li><a href="">ナビ</a></li> |
| <li><a href="">ナビ</a></li> |
| <li><a href="">ナビ</a></li> |
| </ul> |
| <div class="maincontets"> |
| メインコンテンツ |
| </div> |
| <div class="footer"> |
| フッター |
| </div> |
| <div class="pagetop">トップへもどる</div> |
| </div> |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
| <script> |
| $(window).scroll(function () { |
| var navTop = $(".nav").offset().top; |
| var footerTop = $(".footer").offset().top; |
| var scrollPosition = $(window).scrollTop(); |
| if ($(window).height() + scrollPosition < footerTop && scrollPosition > navTop) { |
| $(".pagetop").fadeIn(); |
| } else { |
| $(".pagetop").fadeOut(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
| ``` |
s8_chu score 14639
2017/08/14 18:35 投稿
| 的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？ |
| ```HTML |
| <!DOCTYPE html> |
| <html lang=" |
| <html lang="ja"><!-- 修正 --> |
| <head> |
| <meta charset="UTF-8"> |
| <title>タイトル</title> |
| <style type="text/css"> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| .maincontets { |
| height: 5000px; |
| background-color: #eee; |
| } |
| .nav { |
| margin-top: 700px; |
| background-color: #ddd; |
| } |
| .footer { |
| background-color: #ccc; |
| height: 300px; |
| } |
| .pagetop { |
| display: none; |
| position: fixed; |
| bottom: 10%; |
| margin-top: -30px; |
| right: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="wrapper"> |
| <ul class="nav"> |
| <li><a href="">ナビ</a></li> |
| <li><a href="">ナビ</a></li> |
| <li><a href="">ナビ</a></li> |
| </ul> |
| <div class="maincontets"> |
| メインコンテンツ |
| </div> |
| <div class="footer"> |
| フッター |
| </div> |
| <div class="pagetop">トップへもどる</div> |
| </div> |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
| <script> |
| $(window).scroll(function () { |
| var navTop = $(".nav").offset().top; |
| var footerTop = $(".footer").offset().top; |
| var scrollPosition = $(window).height() + $(window).scrollTop(); |
| if (scrollPosition < (footerTop - navTop) && scrollPosition > (navTop + 350)) {//修正 |
| $(".pagetop").fadeIn(); |
| } else { |
| $(".pagetop").fadeOut(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
| </html> |
| ``` |
