EC-CUBE3でスムーススクロール

2017年04月14日 20:55
カテゴリ: EC-CUBE


備忘録のために。

html/template/テンプレート名/js/　の
「function.js」
の80行目辺りに記述があるので、標準でついているということになる。
ここの
$('a.anchor').on('click', function () {
を
$('a[href^=#]').on('click', function () {
と修正し、

app/template/テンプレート名/　の
「default_frame.twig」　に
<div class="pagetop"><a href="#" title="上に戻る"></a></div>

と記述。


CSSに、例えばですが・・・

/*=====　上に戻るスムーススクロール　=====*/
.pagetop a{
 width: 50px;
 height: 50px;
 background:#333;
}
.pagetop a:after {
 display: block;
 content: '';
 position: absolute;
 top:0px;
 left:0px;
 right: 0;
 bottom: -8px;
 margin: auto;
 width:20px;
 height:20px;
 border-right:6px solid #fff;
 border-bottom:6px solid #fff;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 transform: rotate(-135deg);
}

と記述すれば出来上がり♪

追記

これだけだと、カートの挙動がおかしくなってしまうので

ルート/app/template/テンプレート名/Block/
のcart.twigを少し編集しないといけません。

<a href="#cart">と</a>をコメントアウトか削除します。
これに囲まれているsvgなどは消さないでください。
•23行目辺りにある<a href="#cart">
•31行目辺りにある</a>
のみです。

このaタグ要らないですよね～。
<p class="clearfix cart-trigger">をクリックすれば、ちゃんとカート情報が表示されますからね。

この記事が少しでも役立ったらハートを押してね！

執筆者

大岩智将 OHIWA Tomoyuki

兵庫県加古川市を拠点に活動するWebディレクター / デザイナー。「縁グラフィクション」代表。お客様との「縁」を大切に、心に響くクリエイティブを提案しています。日々の制作の裏側や、役立つTipsをブログで発信中。→詳しい紹介

【レンタルサーバーご検討中の方へ】
このブログはエックスサーバーを使用しています。
さくらインターネットも使いやすいですよ。

EC-CUBE3でスムーススクロール

追記

同じカテゴリの記事