記事を下方まで閲覧後トップに戻るスクロールボタンをクリックすると
気持ちよく、柔らかくスムーズにサイト上部に移動するサイト構成は
ワールドプレスやブログなどではよくお見かけ致しますが、シリウスでも
デフォルト、レスポンシブ、1.5テンプレート各種で導入カスタマイズは
可能です..........

 

　2016　0812更新　2018　0620再更新

---

 

あまたのサイト群を拝見しますとサイト巻末にトップに戻るなんて画像
メニューがございましたね

 

あれれと思いクリックしたのですが瞬間移動のリンクでしたね

 

この仕様は、現在の7シリウステンプレートに付属はしているのですが、
なんか、いまいち...

 

瞬間移動ではなくゆるりと上部にスクロールするなら？なんかいい感じですが
アッという間の移動ではなんかいまいち？？

 

サポートでも、ここのところスクロールボタンは取り付けできないか？と
なぜか5件も依頼がございましたので記事を追加します

 

長文の記事など最後まで拝読する読者様への優しい気配りでしょうか？

 

解説の4ステップでスクロールボタンの取り付けは出来ますので　
興味があるならチャレンジしてください

 

なにごとも経験です　

 

手馴れればいろんなことに応用ができますよ
頑張ってみましょう

 

今回のスクロールボタンは当サイト右下にスクロールすると表示が
確認いただけます

 

作動を確認して、よろしければお取付ください
尚、カラーや戻り位置　作動スピードは変更可能です

 

---

 

前置き

 

シリウスの第1.5追加ニューテンプレートに導入したのですが、ややレイアウトに
不具合が確認できましたので回復措置完了...

 

テンプレートの構造違いが影響しているのかと理解していたのですが、その後
他テンプレートでも新規導入する際はエラー発症（レスポンシブTPでも）

 

ですので、発症原因？はシリウスソフト...すみません、表現の間違いですね
シリウスが進化したため、過去手法が追い付かない...でしょうか？

 

ですので、過去バージョンCSSと現代CSSの二つを記載しておきますので、
もし、レイアウトエラーでしたら、入れ替えてください...

 

jqueryプラグイン　1.4.2/jquery.min.jsを使います

 

説明記載以降の前置き

 

jqueryプラグイン　1.4.2/jquery.min.jsをサーバーに入れると
説明しておりますが、後々確認してみますと、
いれなくとも記述のみでも正常に動いているのが
なぜか、確認できております....?

 

jqueryプラグインをダウンロード、サーバーアップの工程は省かれても
よろしいかも知れません

 

HTML追加コードには、1.4.2/jquery.min.jsが含まれていますね
この行は、削除せずとも作動に影響は及ぼしません
後々を考えて削除せずをご選択ください

 

コードのみで動かずの場合のみ、jqueryプラグインをアップしてください

 

 

 

こちらのサイトでダウンロード
http://blog.jquery.com/2010/02/19/jquery-142-released/

 

jquery/1.4.2/jquery.min.jsは
以下の記述のものを選んでクリックしてください
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

 

 

お探し物が見つからない場合

 

以下リンクで　直接min.jsファイルをダウンロードできます
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

 

注意事追記　W10利用の際　リンククリックでjquery.min.jsが
何かしらのパソコン設定が影響してか　ダウンロードされない....

 

💻画面上でファイル内容の記述表示となることがございます

 

そのままではダウンロード　ファイルの取り込みができませんので

 

マウスの右クリック操作で表示される一覧メニューより　

 

名前を付けて保存を選択してダウンロードファイルに変換してください

 

..ファイルは解凍せずでOK...そのまま使えます

 

 

ダウンロードしましたら　シリウスの生成の次のアップロード画面で
左ローカルより右サーバーへファイルをアップロードします

 

 

 

ＭＴＭＬテンプレートへの記述

 

以下記述をhead内に貼り付けてください
トップページMTMLのみですと、トップページのみでしか反映されません
全てのページで反映する場合、カテゴリー　エントリーともに
リンク集HTMLまで記述を追加します

 

 

長いですけどコピーはここからです

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--backtotop-->
<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>

 

 

ここまで

 

---

 

body内に表示指定

 

 

つぎにMTML内の body内に表示される指定をします

 

戻るボタンをポチした際、戻る地点に記述は置きます

 

以下記述をコピーして貼り付けます　

 

貼り付けは、トップ　カテゴリー エントリーページHTML内に全てにです

 

サイトマップで設置の必要がある際は、正常作動の確認を
しておりますので可能です

 

当サイトの場合の貼り付け例　位置をご確認ください

 

<!-- ★メインコンテンツここから★ -->

 

<div id="contents">
<div id="threebox">
<div id="main">

 

<% freeSpace1 %>
ここです
<div class="backtotop"><a href="#container">TOP</a></div>

 

<% if:siteMode(normal) %>

 

<!-- ★▽通常モードここから▽★ -->

 

<% textTitle1 %>
ここまで

 

 

 

自分サイトで戻り位置を確認後、もっと下の位置に変更したいなら
置き場所をいくつか項目の下行へ置き換えてみてください

 

---

 

 

スタイルシートへの記述

 

メインスタイルシートを開いて、一番下でよいのでコピーして貼り付けて下さい..
こちらの記述変更でカスタムが可能です...

 

二つございますので上コードでレイアウトエラーなら下コードと入れ替えて
ください...

 

過去からのコード

 

上コードでレイアウトがずれていたら以下をご使用ください..
新コード

 

 

ここまでで作業は終了しました
でも、プレビューの確認では、多分？クリックで瞬間移動です...

 

滑らかに動くのは、パソコンのスクリプトを解除するか、アップロード以降
の画面でとなります..

 

 

カスタム関しては、然程面倒でもございませんので、ご自身で
あれこれとお考えください...

 

ご参考

 

せっかくサイトに導入したロング記述ですがうっかりとテンプレートを変更など
してしまうと記述が消滅してしまい...再設定となります..

 

面倒を回避するためテンプレートのエクスポートを必ずしてください...

 

また、他にサイトも所有しているなら忘れないうちに追加配置しときましょう...

 

あれこれ

 

今回のページ戻るボタンはカスタム可能でよいものです

 

でも、他にもっとないかな？なんてお考えの方へ

 

他にも20ほどのボタンを実装しようとしたのですが
なぜか、シリウスにうまく適合するものがありません

 

ボタンは表示されても瞬間移動してしまうとか？

 

jQueryプラグインを入れた事やscriptが原因なのか？
他の不具合が表れてしまうことも！

 

 

追記

 

もう一つ、簡単に取り付け可能なものを見つけました
こちらでご覧ください

 

 

今回のボタンはスピードも変化可能

 

形も四角に変えられますね

 

カラーも変更可能

 

これだけできれば他のボタンを取り入れることもないでしょうから

 

あれこれとお探しになるよりカスタムしちゃえと　お考えになられては？

 

 

探し求めることをおすすめしない　もう一つの理由

 

ネット上にはスクロールボタンについての解説はおおくございます

 

ＨＴＭＬやＣＳＳに記述するコードはコピーできるよう備えてあるサイトも
多くみられます

 

正確か？　不正確かは判断できませんが

 

しかし、肝心のjQueryプラグインの解説が抜けているんですね

 

jQueryを実装してスクロ―ルボタンを取り付けよう....　

 

なんて言ってはいてもjQueryというだけで種別が解らないんですね

 

jQueryの記述さえもないサイトを見かけます

 

意味のないサイト群で無意味な情報求めても時間の浪費に
なってしまいます

 

---

 

最後になりますが、一部シリウスにあてはめの変更はございますが
当解説の1.4.2/jquery採用に関しましては　
.こちらのサイトを一部参考にさせていただきました
うえびろぐさま

 

ありがとうございます

 

ご参考下さい
http://webbeginnerslog.com/jquery/back-to-top-button/

 

スポンサーリンク

 

 

 

トップに戻るスクロールボタンを取り付ける手順解説

 

シリウスカスタマイズ