ラック
Home > ブログ > 記事 > 2018年1月 > Barba.jsを使ったサイトでのアンカー移動で苦戦

Barba.jsを使ったサイトでのアンカー移動で苦戦

カテゴリ: ホームページ,プログラム

Pjaxを利用できるJSプラグインにBarba.jsというものがあります。これを使ったサイトを作ってみたまでは良かったのですが、一つ引っかかったのでメモ。

アンカーがあるリンクでジャンプすると、Pjaxによるページ遷移ではなく、通常のページ遷移(ただのジャンプ)をしているようなのです。今回はそれでは困る、ということでどうにかならないか調べました。

動かないことの直接的な原因としては、GithubのBarba.jsのコードでいうと1340行目辺り

//Ignore case when a hash is being tacked on the current URL
        if (href.indexOf('#') > -1)
          return false;

とあり、シャープを含むリンクは実際のプロセスの動作前にreturn falseして黙ってしまう、という感じのようです。最初はpreventCheck関数をオーバーライドすれば行けるかと思ったのですが、チェックをスルーさせても結局は実際の処理の部分でエラーを起こして引っかかってしまうので、普通にシャープをアンカーにする方法ではダメなようです。

そこで色々考えた結果、GETパラメータで擬似的にアンカー移動することにしました。今回実現したい動作は「他のページへ遷移する際に、遷移した後のページのトップではなくアンカー位置にジャンプして欲しい」ということなので、

  1. GETパラメータを付与したURLへPjaxでジャンプ
  2. ジャンプした先のページでGETパラメータを解析、offsetの値を求めてその値分スクロールさせておく

といった感じの挙動で、アンカー位置へのPjaxでのページ遷移を実装することにしました。

var ShutterAnimation = Barba.BaseTransition.extend({
//略
    //URLのアンカー(?以降の部分)を取得、加工してアンカーに移動する
    var urlSearch = location.search;
    urlSearch = getGET(); //「?」を除去

    if ("scrollingElement" in document) { //Chromeだけプロパティが違うので、オブジェクトをブラウザごとにセット
        tgt = document.scrollingElement;
    }
    else if (this.browser.isWebKit) {
        tgt = document.body;
    }
    else {
        tgt = document.documentElement;
    }

    if(urlSearch.anchor === undefined || urlSearch.anchor.length === 0) {
        tgt.scrollTop = 0;
    }
    else {
        var anchor = escapeHtml(urlSearch.anchor);
        var target = $("#" + anchor).offset().top; //アンカーの位置情報を取得
        tgt.scrollTop = Math.floor(target);
    }
    this.done();
  }
//略
});

//GETパラメータを解析してキーと値の配列に格納
function getGET() {
//処理
}

こんな感じで。

参考

タグ: javascript,トラブル対処

 



関連する記事一覧