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