

jqueryを使ったスムーズスクロールを実装しています。  
以下のコードです。

[code]

    $(function(){
        $('a[href^="#"]').click(function () {
            var speed = 400;
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            $("html, body").animate({ scrollTop: position }, speed, "swing");
            return false;
        });
    });
    
[/code]

htmlファイルはこのようにします。

[code]

    <a href="#no_%e6%97%a5%e6%9c%ac%e8%aa%9e">h2へ</a>
    <h2 id="no_%e6%97%a5%e6%9c%ac%e8%aa%9e">ここにいく</h2>
    
[/code]

移動はできるのですが、javascriptでエラーがでてスムーズスクロールになりません。

エラーは以下のとおりです。

[code]

    Error: Syntax error, unrecognized expression: #no_%e6%97%a5%e6%9c%ac%e8%aa%9e
    
[/code]

このようにピュニコード混じりのidではスムーズスクロールができないのでしょうか。  
解決策があれば教えて下さい。


CC BY-SA 4.0
2020-01-24T09:37:13.853
62517
2020-01-25T02:36:52.813
2020-01-25T02:36:52.813
32986
37580
question
jquery
jqueryでスムーズスクロールを実装、idにピュニコード混じりの文字列を使うとエラーがでる


> 移動はできるのですが、javascriptでエラーがでてスムーズスクロールになりません。  
>  このようにピュニコード混じりのidではスムーズスクロールができないのでしょうか。  
>  解決策があれば教えて下さい。

URI の 仕様としては '#no_%e6%97%a5%e6%9c%ac%e8%aa%9e' (#no_日本語 の UTF8 表現) は  
問題ないでしょうが、  
HTML の タグに % エンコードされたID 指定は正しくないのではないでしょうか？

ID を 日本語 で記入 、 URL は urlエンコードして指定。

[code]

    <a href="#no_%e6%97%a5%e6%9c%ac%e8%aa%9e">h2へ</a>
    <h2 id="no_日本語">ここにいく</h2>
    
[/code]

JavaScript では url デコードして ID を検索

[code]

    var href = decodeURI($(this).attr("href"));
    
[/code]

にしたら、chrome でも Edge でも 動作する事が確認できました。


CC BY-SA 4.0
2020-01-24T13:25:50.977
62520
2020-01-24T13:25:50.977
18851
62517
answer