2017年4月14日金曜日

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


備忘録のために。

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">をクリックすれば、ちゃんとカート情報が表示されますからね。

0 件のコメント :