Blog

HOME > Web > ECCUBE > ECCUBE2.11～ > 【ECCUBE】スマホでのページ内遷移について

【ECCUBE】スマホでのページ内遷移について

2015/06/24

ECCUBE2.11～ ホームページ制作

ECCUBEスマホ案件で、商品詳細のページ内遷移ができないことがわかり、
ちょっと調査・修正に時間がかかったため、備忘録として残します。

参考サイト
ページ内リンクが飛べないのはjquerymobileのせいだった！ページ内ジャンプできる修正方法

1.リンクにイベント用のクラス名をつける

<a href="#aaa" class="anchor">アンカー１</a>｜
<a href="#bbb" class="anchor">アンカー２</a>｜
<a href="#ccc" class="anchor">アンカー３</a>
    1<br>
    2<br>
    3<br>
    4<br>
    <a name="#aaa" id="aaa">アンカー１はここに移動する</a><br/ >
    5<br>
    6<br>
    7<br>
    <a name="#bbb" id="bbb">アンカー２はここに移動する</a><br/ >
    8<br>
    9<br>
    10<br>
    <a name="#ccc" id="ccc">アンカー３はここに移動する</a><br/ >
    11<br>
    12<br>
    13<br>

2.アンカー対策用スクリプトを書く
ECCUBEのテンプレートでscriptがある場所に書きました。

<script type="text/javascript">
    $(document).on('click', 'a.anchor', function(e){
        e.preventDefault();
        var y = $($(this).attr('href')).offset().top;
        $.mobile.silentScroll(y);
    });
</script>

以上で、無事ページ内リンクができるようになりました。

ECCUBE案件では、
あまりページ内遷移は使いませんが、
今後を考えると覚えておいた方がよさそうです。

それにしても、知識が無さすぎとは言えばそれまでですが、
PCと同じように構築して、動作しないとちょっと焦りますね。



ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ