mixitupについて：ページをまたぐ発火引継ぎ＆該当位置へのジャンプさせる方法について

前提・実現したいこと

mixitup.js　を使って、ページ内の主要コンテンツを切り替えられるようにしています。（Aページとします）
（mixitupは表示するパーツをclassで指定できるJS）

トップページにも切替ボタンを配置する必要があったため、トップの切り替えリンクに＃タグを追加、
Aページにはトップのリンククリックでmixitupを発火させるために下記を追加しています。

    $(function(){
        $('#mixitup').mixItUp();
        var hash = window.location.hash.replace(/^#/,"");
        if(hash){
            $("[data-filter='.%s']".replace("%s", hash)).trigger('click');
        }  
    });

ここまでは良かったのですが、実際にAページにジャンプした際に、
Aページに配置しているヘッダーエリアが長いため、下部の実際に切り替えている
場所が見えないということから、トップページからAページにジャンプし、且つ、切替要素の１つ目まで
スクロール（ジャンプ）させてほしいと言われています。

mixitup自体はできれば改変せず、
上記JSを改修し、切り替えられた要素位置までジャンプさせる方法はないでしょうか？

※Aページでのコンテンツ切り替え時に該当箇所へスクロールでも構わないですし、
上記に何かを追加して、トップページからのリンク時のみスクロールでも良いです。

※Aページの配置

［ヘッダー］
［パンくず・ページ見出しなど］

//メインコンテンツここから

【切替リンク１】【切替リンク２】【切替リンク３】
【切替リンク４】【切替リンク５】【切替リンク６】
【切替リンク７】【切替リンク８】【切替リンク９】

＜見出し見出し見出し＞（※ここにジャンプさせたい）
［切替要素１・３］［切替要素１・２・６］［切替要素３］
［切替要素２・５］［切替要素１・４・５］［切替要素２・３］・・・

よろしくお願いいたします。

m.ts10806

2019/07/29 06:38

「PHP」はどのように関係するのでしょうか

takomiya

2019/07/29 08:14

紛らわしくて申し訳ありません。トップぺージはCMSを導入しておりphpファイルのため、ファイル構成的な意味でPHPを挙げておりました。

m.ts10806

2019/07/29 08:18

直接関係ないのであればタグを外しておいてもらえると関係ある場合はもう少し関係が分かるように質問本文を更新しておいてください。 ※CMSもタグ一覧にあるようでしたらつけておいてください https://teratail.com/tags

takomiya

2019/07/30 06:14

失礼しました。タグを削除しました！

行動規範の内容に同意します

回答1件

ベストアンサー

mixituptにはload時にフィルターをかけるオプションがちゃんとあるんやで。

https://www.kunkalabs.com/tutorials/filtering-and-sorting-on-load/

こっちの方法を使っておけば、#の方はページ内スクロールの方に使えるよ。

修正版：
こんな感じかな？
※mixitupの書き方が分からなければ、公式サイトを読んでみてください。

http://hogehoge.com/?filter=thiscat#scrollto

JavaScript
1var filter_data = '';
2filter_data =  getParam( 'filter', location.href );
3
4var mixerOne = mixitup('#js-MixItUpContainer', {
5    controls: {
6        scope: 'local'
7    ,
8    classNames: {
9        block: 'CategoryBlock',
10        elementFilter:'CategoryBlock__item'
11    },
12    selectors: {
13        target: '.Product__item'
14    },
15    load: {
16        filter: filter_data
17    }
18});

追記：

mixitup自体はできれば改変せず、

というのは、「mixitupのjs自体を改変せずに」ではなく、「mixitupを呼び出しているjsを変更させずに」という意味でしょうか？

それならば、リクエストパラメータとして?scrollto=hogehogeと入れておき、

JavaScript
1var scroll_to =  getParam( 'scrollto',location.href);
2
3//以下、https://qiita.com/Garyuten/items/0454a14cbda320882997のコピペ。
4if(scroll_to) {
5    //スクロールを0に戻す
6    $('body,html').stop().scrollTop(0);
7    setTimeout(function () {
8        //ロード時の処理を待ち、時間差でスクロール実行
9        //このやり方だとscroll_toはhashではないので、scroll_toに#がついていないのをすっかり忘れてたので修正
10        scrollToAnker('#' + scroll_to);
11    }, 100);
12}
13
14  // 関数：スムーススクロール
15  // 指定したアンカー(#ID)へアニメーションでスクロール
16function scrollToAnker(hash) {
17    var target = $(hash);
18    var position = target.offset().top;
19    $('body,html').stop().animate({scrollTop:position}, 500);
20}
21

投稿2019/07/29 07:33

編集2019/07/30 21:15

yukikp

総合スコア797

takomiya

2019/07/30 11:33 編集

ご回答ありがとうございます。無知ですみません。 Aページだけで考えるとload時のフィルタは不要（all）としたく、トップからのリンククリックでaページのフィルタを発火させたいと思っています。現在、Reading a URL hash and mapping it into a DOM selector　の方法でトップページから＃リンクでAページのフィルタを動かしています。頂いたヒントを元に考えると、可能性として、パラメータ付与と＃を両方使えばいけそうなのですが、・mixitupでページのフィルタを発火　且つ・トップページからAページ内のアンカーリンクをパラメーターを使って動作させるということは可能でしょうか？ sdf/a.html?scrollto=hogehoge#type01 sdf/a.html?scrollto=hogehoge#type02 （aページのアンカー位置にhogehogeを設定）（mixitupで切り替えるのは#type01、#type02） mixitup　のjs自体はできれば改変せず、　と思っていましたが、記述自体がシンプルになるのであれば、mixitupのjs改修（追加）でも、aページへのjs記述追加でもどちらでも結構です。理解が追い付いておらず本当に申し訳ありません。

yukikp

2019/07/30 21:18

> 頂いたヒントを元に考えると、可能性として、パラメータ付与と＃を両方使えばいけそうなのですが、 > ・mixitupでページのフィルタを発火　且つ > ・トップページからAページ内のアンカーリンクをパラメーターを使って動作させる > ということは可能でしょうか？いけそうだと思ったのなら、すぐに（テストサイトなどで）手を動かしてみてください。 getParam( 'scrollto', location.href ); という書き方でリクエストパラメーターが取得できるので、それをfilterの値として利用すればよいだけです。修正版として書いてみました。

takomiya

2019/07/31 08:47

ありがとうございます！頭の中でもやーっとしていたのがクリアになりました。考えるだけじゃなく、考えたものをきちんとコード化できるよう、がんばります。後は何か問題にぶつかっても自分でがんばってみます！ありがとうございました！！

yukikp

2019/07/31 09:37

やった！ぶつかって分からなければ、ここで先人たちの知恵を拝借しましょ～！

行動規範の内容に同意します