スムーズスクロールの実装前に値の取得ができているかの確認

js
1    $(".menu_ul li a[href^='#']").click(function(){
2 
3      var menu_href = $(this).attr("href");
4      console.log(menu_href);
5      var heref_top = menu_href.offset().top;
6      console.log(href_top);
7      // $("html, body").animate({scrollTop:href_top}, speed, "swing");
8    });
9

この記述で、押した物に応じてスクロールをしたいのですが
menu_hrefは取得できるのですが
そのあとの
var heref_top = menu_href.offset().top;に対して
Uncaught TypeError: menuhref.offset is not a function
が出てしまいます
どうすれば解決しますでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

js
1$(".menu_ul li a[href^='#']").click(function(){
2    var menu_href = $(this).attr("href"); //アンカーの値を取得
3    console.log(menu_href); 
4    var target = $(menu_href); // アンカーの値から移動先を取得
5    var href_top = target.offset().top; //移動先の座標を取得
6    console.log(href_top);
7    $("html, body").animate({scrollTop:href_top}, 400, "swing");
8})

投稿2020/09/07 13:14

総合スコア34075

2020/09/07 17:07

回答ありがとうございます動作をうまく行ったのですがいくつかのli項目を押すと Uncaught TypeError: Cannot read property 'top' of undefined が出てしまいますこの場合何がいけないのでしょうか？？立ち続けの質問申し訳ありませんよろしくお願いします

ShojiroAbe

2020/09/07 17:21

すいませんこちら側のミスがありました hatena19さんの記述ミスとかではないですすいませんでした

行動規範の内容に同意します

コードを見ると、menu_hrefの値はクリックされた要素の href の値（＝文字列）なので、offsetというプロパティはありません。

とりあえず手元で動作が確認できたコードは以下です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <ul class="menu_ul">
        <li>
            <a href="#290196.html">test</a>
        </li>
    </ul>
    <script>
        $(function () {
            $(".menu_ul li a[href^='#']").click(function(){
                // var menu_href = $(this).attr("href");
                var menu_href = $(this);
                console.log(menu_href);
                var href_top = menu_href.offset().top;
                console.log(href_top);
                // $("html, body").animate({scrollTop:href_top}, speed, "swing");
                });
            });
    </script>        
</body>
</html>

投稿2020/09/07 09:04