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">をクリックすれば、ちゃんとカート情報が表示されますからね。
のcart.twigを少し編集しないといけません。
<a href="#cart">と</a>をコメントアウトか削除します。
これに囲まれているsvgなどは消さないでください。
•23行目辺りにある<a href="#cart">
•31行目辺りにある</a>
のみです。
このaタグ要らないですよね~。
<p class="clearfix cart-trigger">をクリックすれば、ちゃんとカート情報が表示されますからね。
コメント