バックボタンの外部導入？
シリウスの新テンプレートを確認するとレスポンシブ同様のスクロール以下で、戻る
（トップ、TOP）を示唆する戻りボタンはデフォルトで付属しておりますが、見た目は
如何でしょう..?
好まれるデザインでしょうか？
というわけで、親サイトでも配布しているスクロール途中でも巻末からでもスーッと
上部位置に移動するバックボタンを新テンプレートに入れ込む作業へ進む方は
おられるのですが、仕様が異なるためか？
デザインのスタイルに不具合...が、見られます...
検証の結果、ニューテンプレートだけに限らない..シリウス1.5バージョンアップ以降は、
他のテンプレートでも新規開設以降は見られる症状と確認できました。
過去から継続使用のテンプレートでは異常は見られないものの..新規で入れ込むと
見られる症例..シリウスソフトの構造変化に過去の仕様が適合しない...と理解します..
ですので....
新テンプレートでも正常レイアウトで現れるよう修正しております...
詳細は、ビジネステンプレートでも検証済み..同一の工程で取り付けできます..
ビジネスTPでの作動は、こちらをご覧ください..
シリウスニュー（新）ビジネステンプレート専用カスタマイズ
初めての方もおられるので、作業手順を御覧ください..
○1...取り外すもの...○
トップ..カテゴリ..エントリーHTML内から以下の記述を削除します..
(削除しないと以後導入ボタンと二つ表示されます？）
デフォルトのコード
<div id="pagetop"><a href="#">先頭へ戻る</a></div>
○2...HTML追加記載..1○
body...すぐ下に以下コードを張り付けてください..
<div class="backtotop"><a href="#top">TOP</a></div>
○3...HTML スクリプトプロパティ追加記載..1○
1.4.2/jquery.min.jsの読み込みコードございますが、無くても作動するみたい？
読み込みが無い場合...ポチすると一気に瞬間移動...
読み込まれるとスーッと緩やか移動...
当サイト関連では、なぜか以下コードで緩やか移動してます...が、その作動が
確認できないときはサーバーにjquery入れてください...
一部不具合の対処
バックボタンの作動は、スクリプトが読み込まれるとノンスクロールでは表示
されません..
ある程度スクロールすると現れ..ポチすると緩やかに上にスローアップするのですが、
プラウザ環境により、トップページ以下では最初から表示されている...アンダーで
ポチすると瞬間でアップ移動してしまう作動は読み込まれていないと理解します。
各テンプレートHTMLに読み込むjquery.を配置するのですが、衝突して不作動となる
例もありますので、HTML別に種別を変えてみると回避できるかも？しれません..
カテゴリー、エントリーHTMLは、jquery/1.4.2/jquery.min.jsを143、145とか...
存在するコード別に書き換える...で正常作動例確認済み..
head内に配置してね....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var topBtn = $('.backtotop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
</script>
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
<!--popup-->
<script type="text/javascript">
$(function() {
$('a.popup').click(function(event){
event.preventDefault();
window.open(this.href,'_blank');
return false;
});
});
</script>
<!--tooltip-->
<script type="text/javascript">
$(function() {
var tooltip = $('<p></p>').appendTo($('body')).css({opacity: 0}).hide();
$('ul#tooltip li').each(function() {
var element = $(this);
var text = element.attr('title');
element.attr('title','');
element.hover(function(e) {
tooltip.stop()
.text(text)
.addClass('arrow_box')
.css({
position : 'absolute',
left : e.pageX - 5,
top : e.pageY + 30
})
.show()
.animate({
opacity: 0.9
}, 1000);
},function() {
tooltip.stop()
.animate({
opacity: 0
}, 1000, function(){
tooltip.hide()
});
});
element.mousemove(function(e){
tooltip.css({
position : 'absolute',
left : e.pageX -5,
top : e.pageY + 30
});
});
});
});
</script>
○4...スタイルシート CSS追加..○
操作画面 スタイルシート（ユーザー指定スタイル）の枠内にです...
お間違いないよう...
div.backtotop {
position:fixed;
bottom:30px;
right:15px;
z-index: 9000;
}
div.backtotop a {
display:block;
width:40px;
height:40px;
line-height:40px;
padding:20px;
color:#FFF;
font-weight:bold;
background-color:#333; /*背景色を変える際はコード変更*/
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
ここまで...
当サイトは、カラーコード#333に指定しておりますが、変更は可能ですので
あなたの好みに書き換えてください...
ご注意
当解説のバックボタンは新テンプレート専用ですので、以外はこちらを御覧ください..
https://www.affiliateno1.com/トップに戻るスクロールボタンを取り付ける手順解説/
.....
ひとつずつ各情報を追記してまいりますが、記事が要望に追い付かないかも...多分？
こちらに質問を寄せられますと未記載でも対応してまいります...
https://www.affiliateno1.com/シリウスカスタマイズサポートフォーラム/シリウスカスタマイズサポートフォーラム一覧/
