deeplus+

当たり前のように使うことが多いスムーズスクロールですが、jQueryのslicknavを使用した際にボタンクリックで常にページTOPに戻ってしまうようになりました。前にもこんな事あったなと思いつつ...jQuery2.2(1.12)でjQueryが動かなくなった人にも役立つかもしれません。

jQuery スムーズスクロール

使用しているスムーズスクロールはこちら。

$(document).ready(function () {
//スムーズスクロール
  $('a[href^=#]' ).click(function() {
    // スクロールの速度 (ミリ秒)
    var speed = 400;
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を数値で取得
    var position = target.offset().top;
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

:not(selector)を使って指定した要素を除外する

参照元を見ていただければ万事解決ですが、それではメモの役目も果たしていないので...。スムーズスクロールの最初の部分の指定方法が、ページ内のアンカーリンク全てだという事が問題のようです。今回はslicknavのボタンと今後タブを作る際にも使える汎用の class を除外します。

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

.click する対象から class の .slicknav_btn と .non-scrollを除外しています。

$('a[href^="#"]' + 'a:not(.non-scroll)' + 'a:not(.slicknav_btn)').click(function() {

jQuery2.2(1.12)で動かない場合の対応

jQueryの新しいバージョンでは上記のスムーズスクロールではエラーがでて動かないようです。#を"#"で囲うと動作するようになります。

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