質問編集履歴

2 コードブロックで囲んでいなかったコードを削除しました。

Lima

Lima score 9

2017/07/16 19:09  投稿
「トップページへ戻る」ボタンが下層ページで表示されない
###前提・実現したいこと
JavaScript初心者です。
jQueryでスムーズスクロールを設置しましたが、トップページでは問題なく表示されるものの、下層ページでは「トップページへ戻る」のボタンが表示されません。
Consoleを見ると以下のエラーメッセージが表示されました。
```ここに言語を入力
Uncaught TypeError: Cannot read property 'top' of undefined
   at HTMLAnchorElement.<anonymous> (main.js:61)
   at Function.each (jquery.js:4)
   at init.each (jquery.js:4)
   at Scroll (main.js:60)
   at main.js:12
   at dispatch (jquery.js:5)
   at v.handle (jquery.js:5)
```
###該当のソースコード
 
jQuery(function($) {'use strict',  
 
   // all Parallax Section  
   $(window).load(function(){'use strict',  
       $("#services").parallax("50%", 0.3);  
       $("#parador").parallax("50%", 0.3);  
   });  
 
 
   // Navigation Scroll  
   $(window).scroll(function(event) {  
       Scroll();  
   });  
 
   $('.navbar-collapse ul li a').click(function() {   
       $('html, body').animate({scrollTop: $(this.hash).offset().top - 79}, 1000);  
       return false;  
   });  
```ここに言語を入力
$(function() {
   var pageTop = $('.page-top');
   pageTop.hide();
   $(window).scroll(function () {
       if ($(this).scrollTop() > 600) {
           pageTop.fadeIn();
       } else {
           pageTop.fadeOut();
       }
   });
   pageTop.click(function () {
       $('body, html').animate({scrollTop:0}, 500, 'swing');
       return false;
   });
});
});
// Preloder script
jQuery(window).load(function(){'use strict';
   $(".preloader").delay(1600).fadeOut("slow").remove();
});
//Preloder script
jQuery(window).load(function(){'use strict';
   // Slider Height
   var slideHeight = $(window).height();
   $('#home .carousel-inner .item, #home .video-container').css('height',slideHeight);
   $(window).resize(function(){'use strict',
       $('#home .carousel-inner .item, #home .video-container').css('height',slideHeight);
   });
});
// User define function
function Scroll() {
   var contentTop     =  [];
   var contentBottom  =  [];
   var winTop     =  $(window).scrollTop();
   var rangeTop   =  200;
   var rangeBottom =  500;
   $('.navbar-collapse').find('.scroll a').each(function(){
       contentTop.push( $( $(this).attr('href') ).offset().top);
       contentBottom.push( $( $(this).attr('href') ).offset().top + $( $(this).attr('href') ).height() );
   })
   $.each( contentTop, function(i){
       if ( winTop > contentTop[i] - rangeTop ){
           $('.navbar-collapse li.scroll')
           .removeClass('active')
           .eq(i).addClass('active');
       }
   })
};
```
《CSS》
```ここに言語を入力
.page-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   font-size: 77%;
}
.page-top a {
   background: #666;
   text-decoration: none;
   color: #fff;
   width: 100px;
   padding: 30px 0;
   text-align: center;
   display: block;
   border-radius: 5px;
}
.page-top a:hover {
   text-decoration: none;
   background: #999;
}
```
《HTML》
```ここに言語を入力
<body id="top">
   <div class="preloader">
       <div class="preloder-wrap">
           <div class="preloder-inner">
               <div class="ball"></div>
               <div class="ball"></div>
               <div class="ball"></div>
               <div class="ball"></div>
               <div class="ball"></div>
               <div class="ball"></div>
               <div class="ball"></div>
           </div>
       </div>
   </div><!--/.preloader-->
   <header id="navigation">
       <div class="navbar navbar-inverse navbar-fixed-top" role="banner">
           <div class="container">
               <div class="navbar-header">
---------- 中略 ---------- 
</footer> <!--/#footer-->
<a href="#home" class="page-top"><i class="fa fa-chevron-up" aria-hidden="true"></i><br>PAGE TOP</a>
   
</body>
</html>
```
同様の問題を紹介されているサイトで「offset().top);
」に問題があるということは理解できました。
ただ、どのように修正すれば、下層ページでもボタンが表示されるようになるのか分かりません。
解決先をご存知の方、ご教示いただけないでしょうか。
よろしくお願いします。
  • JavaScript

    27904 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    17041 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
1 コードブロックで囲みました。

Lima

Lima score 9

2017/07/16 18:50  投稿
「トップページへ戻る」ボタンが下層ページで表示されない
###前提・実現したいこと
JavaScript初心者です。
jQueryでスムーズスクロールを設置しましたが、トップページでは問題なく表示されるものの、下層ページでは「トップページへ戻る」のボタンが表示されません。
Consoleを見ると以下のエラーメッセージが表示されました。
```ここに言語を入力  
Uncaught TypeError: Cannot read property 'top' of undefined
   at HTMLAnchorElement.<anonymous> (main.js:61)
   at Function.each (jquery.js:4)
   at init.each (jquery.js:4)
   at Scroll (main.js:60)
   at main.js:12
   at dispatch (jquery.js:5)
   at v.handle (jquery.js:5)
```  
###該当のソースコード
jQuery(function($) {'use strict',  
 
   // all Parallax Section  
   $(window).load(function(){'use strict',  
       $("#services").parallax("50%", 0.3);  
       $("#parador").parallax("50%", 0.3);  
   });  
 
 
   // Navigation Scroll  
   $(window).scroll(function(event) {  
       Scroll();  
   });  
 
   $('.navbar-collapse ul li a').click(function() {   
       $('html, body').animate({scrollTop: $(this.hash).offset().top - 79}, 1000);  
       return false;  
   });  
 
```ここに言語を入力  
$(function() {  
   var pageTop = $('.page-top');  
   pageTop.hide();  
   $(window).scroll(function () {  
       if ($(this).scrollTop() > 600) {  
           pageTop.fadeIn();  
       } else {  
           pageTop.fadeOut();  
       }  
   });  
   pageTop.click(function () {  
       $('body, html').animate({scrollTop:0}, 500, 'swing');  
       return false;  
   });  
});  
 
});  
// Preloder script  
jQuery(window).load(function(){'use strict';  
   $(".preloader").delay(1600).fadeOut("slow").remove();  
});  
//Preloder script  
jQuery(window).load(function(){'use strict';  
 
   // Slider Height  
   var slideHeight = $(window).height();  
   $('#home .carousel-inner .item, #home .video-container').css('height',slideHeight);  
 
   $(window).resize(function(){'use strict',  
       $('#home .carousel-inner .item, #home .video-container').css('height',slideHeight);  
   });  
});  
 
// User define function  
function Scroll() {
   var contentTop     =  [];
   var contentBottom  =  [];
   var winTop     =  $(window).scrollTop();
   var rangeTop   =  200;
   var rangeBottom =  500;
   $('.navbar-collapse').find('.scroll a').each(function(){
       contentTop.push( $( $(this).attr('href') ).offset().top);
       contentBottom.push( $( $(this).attr('href') ).offset().top + $( $(this).attr('href') ).height() );
   })
   $.each( contentTop, function(i){
       if ( winTop > contentTop[i] - rangeTop ){
           $('.navbar-collapse li.scroll')
           .removeClass('active')
           .eq(i).addClass('active');
       }
   })
};
```  
《CSS》  
 
```ここに言語を入力  
.page-top {  
   position: fixed;  
   bottom: 20px;  
   right: 20px;  
   font-size: 77%;  
}  
.page-top a {  
   background: #666;  
   text-decoration: none;  
   color: #fff;  
   width: 100px;  
   padding: 30px 0;  
   text-align: center;  
   display: block;  
   border-radius: 5px;  
}  
.page-top a:hover {  
   text-decoration: none;  
   background: #999;  
}  
```  
 
《HTML》  
 
```ここに言語を入力  
<body id="top">  
   <div class="preloader">  
       <div class="preloder-wrap">  
           <div class="preloder-inner">  
               <div class="ball"></div>  
               <div class="ball"></div>  
               <div class="ball"></div>  
               <div class="ball"></div>  
               <div class="ball"></div>  
               <div class="ball"></div>  
               <div class="ball"></div>  
           </div>  
       </div>  
   </div><!--/.preloader-->  
   <header id="navigation">  
       <div class="navbar navbar-inverse navbar-fixed-top" role="banner">  
           <div class="container">  
               <div class="navbar-header">  
 
 
---------- 中略　----------   
 
 
</footer> <!--/#footer-->  
<a href="#home" class="page-top"><i class="fa fa-chevron-up" aria-hidden="true"></i><br>PAGE TOP</a>  
 
     
</body>  
</html>  
```  
同様の問題を紹介されているサイトで「offset().top);
」に問題があるということは理解できました。
ただ、どのように修正すれば、下層ページでもボタンが表示されるようになるのか分かりません。
解決先をご存知の方、ご教示いただけないでしょうか。
よろしくお願いします。
  • JavaScript

    27904 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    17041 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

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