jQuery smooth scroll in Japanese

Question

in this page (in Japanese), the links use jQuery to make a smooth transition towards the ID they're referenced to, but as it is using Japanese characters (SEOwise), it does not work.

// Smooth scroll
    
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top - 200
                }, 1000);
                return false;
            }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sommaire bullets" role="navigation">
  <ol>
    <li><a href="#北海道エリアで選べる電力会社">北海道エリアで選べる電力会社</a></li>
    <li><a href="#北海道エリア電力会社・電気料金">北海道エリアの電力会社と電気料金プラン</a></li>
  </ol>
</div> 

<h2 id="北海道エリアで選べる電力会社">北海道エリアで選べる電力会社</h2>
<h2 id="北海道エリア電力会社・電気料金">北海道エリアの電力会社と電気料金プラン</h2>

If I change the href and the ID to any Latin-based wording, it works as expected.

Is there any way I can make jQuery work with the Japanese characters?

You got snippets of code on the edit. But you can go to the link I put initially where all the code is online and where you can check everything :-) — Enzo, Apr 10 '18 at 09:01

score 0 · Accepted Answer · answered Apr 10 '18 at 09:25

You need to decode this.hash first. This can be done using decodeURIComponent().

This should work:

// Smooth scroll
    
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(decodeURIComponent(this.hash));
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top - 200
                }, 1000);
                return false;
            }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sommaire bullets" role="navigation">
  <ol>
    <li><a href="#北海道エリアで選べる電力会社">北海道エリアで選べる電力会社</a></li>
    <li><a href="#北海道エリア電力会社・電気料金">北海道エリアの電力会社と電気料金プラン</a></li>
  </ol>
</div> 

<h2 id="北海道エリアで選べる電力会社">北海道エリアで選べる電力会社</h2>
<h2 id="北海道エリア電力会社・電気料金">北海道エリアの電力会社と電気料金プラン</h2>

score 0 · Answer 2 · answered Apr 10 '18 at 09:29

// Smooth scroll
    
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
   
   $('body, html').stop().animate({
                    'scrollTop': $($(this).attr('href')).offset().top
                }, 980);
                
                return false;
            
            
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sommaire bullets" role="navigation">
  <ol>
    <li><a href="#北海道エリアで選べる電力会社">北海道エリアで選べる電力会社</a></li>
    <li><a href="#北海道エリア電力会社・電気料金">北海道エリアの電力会社と電気料金プラン</a></li>
  </ol>
</div> 
<div style="height:500px; width:100%;"></div>
<h2 id="北海道エリアで選べる電力会社">北海道エリアで選べる電力会社</h2>
<div style="height:500px; width:100%;"></div>
<h2 id="北海道エリア電力会社・電気料金">北海道エリアの電力会社と電気料金プラン</h2>

Sorry I am not sure what is your code means, but I've simplified for you.

thx a lot! It has been difficult to track down for me too, as I don't understand japanese either! — Enzo, Apr 10 '18 at 09:36

jQuery smooth scroll in Japanese

2 Answers2