【解決済み】スムーススクロールのせいで、他のjQueryが動かないぞ!!

Article views1,834 VIEW

スムーススクロールってサイトの機能をグッと上げてくれる素敵なjQueryだと思うんですよね。
ただ、何かと競合しあってサイトに不具合を起こすことが多々ありました。

僕の記憶ですが、主に#で起動をフックしているjQueryが動かないことが多かったです。

何故ならスムーススクロールの記述が

<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-55+'px';
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

 $(‘a[href^=#]’)

ここで#を含んでいますね。
これのせいで、#を使用しているjQueryタブやその他のjQueryに不具合を起こすんですねぇ。
ちなみに私が不具合を起こしたjQueryはmmenuです。

あちらを立てればこちらが立たぬの状況を解消しました!

不具合を起こした元の記述

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu();
   });
</script>
 
<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-55+'px';
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>
  1. mmenuが出てこない
  2. フッターにスマートフォンメニュが出てしまう。

不具合が出てしまいます。

このスムーススクロールのjQueryにある

 $('a[href^=#]').click(function(){

の記述を変更します。

不具合を解消した変更後の記述

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu();
   });
</script>
 
<script type="text/javascript">
$(function(){
    $('a[href^=#]' + 'a:not([href *= "my-menu"])').click(function(){
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-55+'px';
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

何が変わったのか

$('a[href^=#]').click(function(){

にmmenuのフック

$("#my-menu")

をキャンセルする

'a:not([href *= "my-menu"])'

を追加しました。

ちなみに


<nav id="my-menu" class="sp">

<ul>

<li><a href="#mm-1" data-target="#mm-1">テストメニュー01</a>

<ul>

<li><a href="/fake_url">テストメニュー2階層目</a></li>

					</ul>

                 </li>


<li><a href="/fake_url">テストメニュー02</a></li>

    	</ul>

    </nav>

の用にliの中にul > liを入れるタイプなら

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu();
   });
</script>
 
<script type="text/javascript">
$(function(){
    $('a[href^=#]' + 'a:not([href *= "my-menu"])' + 'a:not([href*="mm-1"])' + 'a:not([href*="mm-0"])').click(function(){
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-55+'px';
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

で解消されます。

この他にjQueryで作るTab等もこのa:notで回避できます!

これで僕は不具合を解消されました!

参考にしたサイト

jquery スムーズスクロールでタブ切り替えが効かなくなった

Pocket
pinit fg en rect gray 28 - 【解決済み】スムーススクロールのせいで、他のjQueryが動かないぞ!!
line88x20 - 【解決済み】スムーススクロールのせいで、他のjQueryが動かないぞ!!
[`evernote` not found]

Leave a Comment

CAPTCHA