回答編集履歴

2 追記

s8_chu

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>  
```
1 修正

s8_chu

s8_chu score 14639

2017/08/14 18:35  投稿

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか?
```HTML
<!DOCTYPE html>
<html lang="en">
<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>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る