jQuery 日文平滑滚动

Question

in this page（日文），链接使用 jQuery 平滑过渡到它们引用的 ID，但因为它使用日文字符（SEOwise ），这是行不通的。

// 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>

如果我将 href 和 ID 更改为任何基于拉丁语的措辞，它将按预期工作。

有什么方法可以使 jQuery 与日语字符一起使用吗？

Answer 1

您需要先解码 this.hash。这可以使用 decodeURIComponent() 来完成。

这应该有效：

// 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>

Answer 2

// 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>

抱歉，我不确定您的代码是什么意思，但我已经为您简化了。

jQuery 日文平滑滚动

jQuery smooth scroll in Japanese

jquery

cjk