質問: window.location.hash.replace(/^#/,""); if(hash){ $("[data-filter='.%s']".replace("%s", hash)).trigger('click'); } }); ``` ここまでは良かったのですが、実際にAページにジャンプした際に、 Aページに配置しているヘッダーエリアが長いため、下部の実際に切り替えている 場所が見えないということから、トップページからAページにジャンプし、且つ、切替要素の1つ目まで スクロール(ジャンプ)させてほしいと言われています。 mixitup自体はできれば改変せず、 上記JSを改修し、切り替えられた要素位置までジャンプさせる方法はないでしょうか? ※Aページでのコンテンツ切り替え時に該当箇所へスクロールでも構わないですし、 上記に何かを追加して、トップページからのリンク時のみスクロールでも良いです。 ※Aページの配置 ``` [ヘッダー] [パンくず・ページ見出しなど] //メインコンテンツここから 【切替リンク1】【切替リンク2】【切替リンク3】 【切替リンク4】【切替リンク5】【切替リンク6】 【切替リンク7】【切替リンク8】【切替リンク9】 <見出し見出し見出し>(※ここにジャンプさせたい) [切替要素1・3][切替要素1・2・6][切替要素3] [切替要素2・5][切替要素1・4・5][切替要素2・3]・・・ ``` よろしくお願いいたします。
回答: mixituptにはload時にフィルターをかけるオプションがちゃんとあるんやで。 [https://www.kunkalabs.com/tutorials/filtering-and-sorting-on-load/](https://www.kunkalabs.com/tutorials/filtering-and-sorting-on-load/ ) こっちの方法を使っておけば、#の方はページ内スクロールの方に使えるよ。 修正版: こんな感じかな? ※mixitupの書き方が分からなければ、公式サイトを読んでみてください。 http://hogehoge.com/?filter=thiscat#scrollto ``` var filter_data = ''; filter_data = getParam( 'filter', location.href ); var mixerOne = mixitup('#js-MixItUpContainer', { controls: { scope: 'local' , classNames: { block: 'CategoryBlock', elementFilter:'CategoryBlock__item' }, selectors: { target: '.Product__item' }, load: { filter: filter_data } }); ``` 追記: > > mixitup自体はできれば改変せず、 > > > というのは、「mixitupのjs自体を改変せずに」ではなく、「mixitupを呼び出しているjsを変更させずに」という意味でしょうか? それならば、リクエストパラメータとして?scrollto=hogehogeと入れておき、 ``` var scroll_to = getParam( 'scrollto',location.href); //以下、https://qiita.com/Garyuten/items/0454a14cbda320882997のコピペ。 if(scroll_to) { //スクロールを0に戻す $('body,html').stop().scrollTop(0); setTimeout(function () { //ロード時の処理を待ち、時間差でスクロール実行 //このやり方だとscroll_toはhashではないので、scroll_toに#がついていないのをすっかり忘れてたので修正 scrollToAnker('#' + scroll_to); }, 100); } // 関数:スムーススクロール // 指定したアンカー(#ID)へアニメーションでスクロール function scrollToAnker(hash) { var target = $(hash); var position = target.offset().top; $('body,html').stop().animate({scrollTop:position}, 500); } ```