「ページトップへ戻る」スクロールボタンを常時サイト右下に表示する

2017-11-17 10:14
パソコン版HTML5テンプレート/XHTMLテンプレート、スマートフォン版XHTMLテンプレートは自由記入欄にて設定いただけます。
※スマートフォン版HTML5テンプレート、レスポンシブデザインテンプレートについてはデフォルトで表示されています。

下記のHTMLタグを、それぞれ下記箇所に貼り付けてください。

パソコン版
HTML5テンプレート
【デザイン管理】→【配置/画像/コメント】→「コピーライト自由記入欄」
パソコン版
XHTMLテンプレート
【デザイン管理】→【画像とコメントの設定】→「コピーライト」
スマートフォン版
XHTMLテンプレート
【スマートフォン】→【画像とコメントの設定】→「コピーライト」

◯テキストリンクの場合
<a href="index.php?action=artikel&lang=ja&cat=281623&id=1077&artlang=ja#" class="back_to_top" data-right="15px" data-bottom="20px">▲TOPへ</a>
◯画像ボタンの場合
<a href="index.php?action=artikel&lang=ja&cat=281623&id=1077&artlang=ja#" class="back_to_top" data-right="15px" data-bottom="20px"><img src="画像のURL" alt="TOPへ" /></a>

 

data属性について
data属性で表示方法を設定することができます。
data属性一覧
data-right 機能 画面右端から何pxの部分にボタンを表示するかどうか (※cssのright指定)
"15px" (※px指定)
未設定値
"15px"
data-bottom 機能 画面下部から何pxの部分にボタンを表示するかどうか (※cssのbottom指定)
"20px" (※px指定)
未設定値
"20px"
data-z-index 機能 ボタンのz-index値
"1000" (※数値)
未設定値
"1000"
data-speed 機能 スクロールのスピード
"500" (※マイクロ秒の数値)
未設定値
"500"
data-pos 機能 ページ最上部から何pxスクロールしたらボタンを表示するか
"300" (※数値でpxは不要)
未設定値
"300"