

左上にメニューを作って、特定の項目をクリックしたら、コンテンツのトップまでスクロールしていく内容を作りたいのですが、ボタンを押してもエラーが出てしまい、困っています。ご指摘いただきたいです。  
また、簡潔に表示するために提案などがあれば勉強させていただきたいです。  
お願いいたします。

左上のボタンを押した際にでたエラーです。  
index.html:50 Uncaught TypeError: Cannot read property 'top' of undefined  
at HTMLSpanElement. (index.html:50)  
at HTMLSpanElement.dispatch (jquery.js:3)  
at HTMLSpanElement.q.handle (jquery.js:3)

**html**

[code]

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>jQuery</title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/base.css">
    <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
    <div class="wrapper">
      <div class="menu">
        <span class="menu__btn" data-scroll-place-type="home">Home</span>
        <span class="menu__btn" data-scroll-place-type="news">News</span>
        <span class="menu__btn" data-scroll-place-type="about">About</span>
      </div>
      <div class="contents">
        <p class="title" data-scroll-place-type="home">Home</p>
        <p class="body">Lorem </p>
        <p class="title" data-scroll-place-type="news">News</p>
        <p class="body">Lorem </p>
        <p class="title" data-scroll-place-type="about">About</p>
        <p class="body">Lorem </p>
      </div>
      <span class="scrollTopBtn" style="display: none;"></span>
    </div>
    <script src="../../common/js/jquery.js"></script>
    <script>
      $(function() {
        var Topicon = 100;
    <エラー>
        $('.menu__btn').on('click', function() {
        var type = $(this).data('place');
        var pol = $('title').eq(type).offset().top;
        $('html,body').animate({ scrollTop:pol});
        });
    </エラー>
    
        $(window).on('scroll', function() {
          if($(window).scrollTop() >= Topicon) {
            $('.scrollTopBtn').fadeIn();
          } else {
          if($(window).scrollTop() < Topicon) {
            $('.scrollTopBtn').fadeOut();
          }
          }
        });
    
        $('.scrollTopBtn').on('click', function() {
            $('html, body').animate({scrollTop:0});
        });
      });
    </script>
    </body>
    </html>
    </script>
    
[/code]

**css**

[code]

        .clearfix:after {
          display: block;
          clear: both;
          content: '';
        }
        .wrapper {
          padding: 20px;
        }
        .menu {
          position: fixed;
          top: 0;
          left: 0;
          font-size: 0;
        }
        .menu__btn {
          display: inline-block;
          padding: 10px 20px;
          font-size: 14px;
          background-color: #fff;
          cursor: pointer;
        }
        .menu__btn + .menu__btn {
          border-left: 1px #eee solid;
        }
        .contents {
          padding: 10px;
          margin: 100px auto;
          width: 400px;
          background-color: #fff;
        }
        .title {
          padding-top: 10px;
          margin: 0 0 20px;
          font-size: 20px;
        }
        .scrollTopBtn {
          position: fixed;
          bottom: 10px;
          right: 10px;
          width: 40px;
          height: 40px;
          background-color: #fff;
          cursor: pointer;
        }
        .scrollTopBtn:before {
          position: fixed;
          bottom: 18px;
          right: 22px;
          width: 15px;
          height: 15px;
          border-top: 4px #999 solid;
          border-left: 4px #999 solid;
          transform: rotate(45deg);
          cursor: pointer;
          content: '';
        }
    
[/code]


CC BY-SA 3.0
2017-10-27T09:29:56.063
39077
2017-10-30T05:14:59.700
2017-10-28T18:26:11.037
25400
25400
question
javascript jquery
ボタンクリック時にコンテンツのトップまでスクロールしたい

[code]

    var pol = $('title').eq(type).offset().top;
    $('html,body').animate({ scrollTop:'pol'});
    
[/code]

のpolは変数に見受けられます。  
{scrollTop:'pol'}とpol変数をシングルクオートで囲うと文字列になってしまいます。  
scrollTopの引数は数値が求められると思いますので、そこに文字列を指定することでエラーが起こっているのではないでしょうか？

試しに{scrollTop:'pol'}を{scrollTop:pol}にしてみてください。

次回からはkaramarimoさんのいうとおり、エラメッセージの詳細やスクリーンショットなどもう少し詳しい情報をお願いします。  
調べるのに時間がかかってしまいますので。

\----------2017/10/30追記----------  
$('.menu__btn').on('click', function() {}の内容を以下の通りに修正するととりあえず動作します。

[code]

        $('.menu__btn').on('click', function() {
        var type = $(this).data('scroll-place-type');
    //titleクラスの要素を順番にチェック(元のコードでは$('title')となっており、titleクラスではなくtitleタグへのセレクタになっていました)
        $('.title').each(function(index, obj)
        {
            //スクロール対象の要素かどうか、所有しているデータの一致性でチェック
            if($(obj).data('scroll-place-type') === type)
            {
                //ターゲット要素の位置情報を取得
                var pol = $(obj).offset().top;
                //ターゲット要素の位置にスクロールを移動させる
                    $('html,body').animate({ scrollTop:pol});//polのシングルクオートをとる
                //ターゲットが見つかったので、each()ループから抜ける
                return false;
            }
        })
    });
    
[/code]

原因は、

[code]

    $('.title').eq(type).offset().top
    
[/code]

の部分。

[code]

    $('.title').eq(type).offset()
    
[/code]

の時点でundefinedが返却されてしまっているせいで、undefinedオブジェクトにはtopプロパティが存在しないためエラーが起こっています。


CC BY-SA 3.0
2017-10-27T12:47:57.953
39082
2017-10-30T05:14:59.700
2017-10-30T05:14:59.700
17014
17014
39077
answer


こんにちは  
var type = $(this).data('place'); は  
var type = $(this).data('scroll-place-type'); では？しかし、typeの値から .eqに指定する
index番号を得るスクリプトがすぐに思いつかないので以下の様にしました。

[code]

        var index_menu__btn = $('.menu__btn').index(this);
        var pol = $('.title').eq(index_menu__btn).offset().top;
    
[/code]

[code]

        $(function() {
            var Topicon = 100;
            $('.menu__btn').on('click', function() {
                //var type = $(this).data('place');
                var type = $(this).data('scroll-place-type');
    　　　
                var index_menu__btn = $('.menu__btn').index(this);//index番号取得の為追加しました。
                //var pol = $('.title').eq(type).offset().top;
                var pol = $('.title').eq(index_menu__btn).offset().top;
                
                $('html,body').animate({ scrollTop:pol});
            });
    
            $(window).on('scroll', function() {
                if($(window).scrollTop() >= Topicon) {
                    $('.scrollTopBtn').fadeIn();
                } else {
                    if($(window).scrollTop() < Topicon) {
                        $('.scrollTopBtn').fadeOut();
                    }
                }
            });
    
            $('.scrollTopBtn').on('click', function() {
                $('html, body').animate({scrollTop:0});
            });
        });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="wrapper">
        <div class="menu">
            <span class="menu__btn" data-scroll-place-type="home">Home</span>
            <span class="menu__btn" data-scroll-place-type="news">News</span>
            <span class="menu__btn" data-scroll-place-type="about">About</span>
        </div>
        <div class="contents">
            <p class="title" data-scroll-place-type="home">Home</p>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <p class="body">Lorem </p>
            <br>
            <br>
            <br>
            <br>
            <p class="title" data-scroll-place-type="news">News</p>
            <br>
            <br>
            <br>
            <br>
            <p class="body">Lorem </p>
            <br>
            <br>
            <br>
            <br>
            <p class="title" data-scroll-place-type="about">About</p>
            <p class="body">Lorem </p>
        </div>
        <span class="scrollTopBtn" style="display: none;"></span>
    </div>
[/code]


CC BY-SA 3.0
2017-10-28T20:13:17.127
39109
2017-10-28T20:13:17.127
22793
39077
answer


> また、簡潔に表示するために

htmlへ idを追加して typeを使う様に直してみました。

[code]

    $(function() {
            var Topicon = 100;
            $('.menu__btn').on('click', function() {
                //var type = $(this).data('place');
                var type = $(this).data('scroll-place-type');
    　　　
                //var pol = $('.title').eq(type).offset().top;
                var pol = $('#'+type).offset().top;
                
                $('html,body').animate({ scrollTop:pol});
            });
    
            $(window).on('scroll', function() {
                if($(window).scrollTop() >= Topicon) {
                    $('.scrollTopBtn').fadeIn();
                } else {
                    if($(window).scrollTop() < Topicon) {
                        $('.scrollTopBtn').fadeOut();
                    }
                }
            });
    
            $('.scrollTopBtn').on('click', function() {
                $('html, body').animate({scrollTop:0});
            });
        });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="wrapper">
        <div class="menu">
            <span class="menu__btn" data-scroll-place-type="home">Home</span>
            <span class="menu__btn" data-scroll-place-type="news">News</span>
            <span class="menu__btn" data-scroll-place-type="about">About</span>
        </div>
        <div class="contents">
            <p id="home" class="title" data-scroll-place-type="home">Home</p>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <p class="body">Lorem </p>
            <br>
            <br>
            <br>
            <br>
            <p id="news" class="title" data-scroll-place-type="news">News</p>
            <br>
            <br>
            <br>
            <br>
            <p class="body">Lorem </p>
            <br>
            <br>
            <br>
            <br>
            <p id="about" class="title" data-scroll-place-type="about">About</p>
            <p class="body">Lorem </p>
        </div>
        <span class="scrollTopBtn" style="display: none;"></span>
    </div>
[/code]


CC BY-SA 3.0
2017-10-28T20:43:13.723
39110
2017-10-28T20:43:13.723
22793
39077
answer