TOP

サイト左にスクロールボタン配置

サイト左にスクロールボタンを取り付ける解説です。

 

シリウスデフォルトでは正常に反映確認出来ましたが
ビジネステンプレートではなんか、意味不明??

 

親ページではjqueryプラグイン 1.4.2/jquery.min.jsを使いましたが
ここではjqueryプラグイン 1.4.3/jquery.min.Js対象となります。

 

以下のスタイルを確認してください..
ボタン画像はing画像で、できていますのでシリウス画像で編集可能です..

 

ここで注意ごとです

 

アップロード後はボタン内に白矢印マークが確認できますが..

 

プレビューでの確認は以下反映不足..画面ではアップ正常反映となります。

シリウスデータにもscriptファイルを入れ込めば正常反映するのですが、
2度手間なので説明はパス...

 

 

動きは1.4.2とほぼ同様です

 

取り付け手順は1.4.2と同様ですが、記述が異なりますので
以下を参考に貼り付けてください

 

参考サイトはこちら...DEMOで作動確認願います
サイト内にダウンロードとありますが、なんか解説が不明ですので
ダウンロードしないでください
http://webdesignerwall.com/tutorials/animated-scroll-to-top

 

 

色々試したのですが
jquery-1.4.3.min.jsのダウンロードはこちらが良いです
http://sourceforge.jp/projects/sfnet_jkashbey/downloads/js/jquery-1.4.3.min.js/
シリウスにアップロードしといてください

 


 

head内に張り付け記述

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
;</script>

 

<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').stop().fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>

 


 

body内貼り付けコード

 

<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>

 


 

ボタン画像を入れる場合は以下の
<span></span>を削除して画像コードに入れ替えてください

 

 

スタイルシートを開いて最下部に以下記述を貼り付けします

 

 

#back-top {
position: fixed;
bottom: 30px;
margin-left -150px;
}

 

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

 

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

 

/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;

 

/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

 

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}

 

 

ここまでで完了です

 

 


 

ご報告

 

参考サイトの記述はシリウスにすべてが当てはまらず...
正常作動するため改行しております..

 

障害

 

ボタン画像の位置を変更しようと
CSSで margin-left -150px;の記述をright に替えたところ

 

サイト内(に記事台紙)入ってしまいました...

 

記述を元に戻しても戻らず...あれこれと

 

PCオフ 再起動で回復

 

スクロールボタンて簡単なようですが、ミスするとサイト内に与える影響度は
大きいですね

 

スクロールボタン取り付けのちょっとした手違いで...カスタムサイトが
レイアウト崩れ 

 

巡り合いたくない障害に巻き込まれるんですね

 

不具合での面倒を避けるために..
ウェブ初心者の方はボタン、画像を入れ替える程度にして
当サイト提供の記述は意味を理解するまでいじらないほうが
良いかもしれません...

 

スポンサーリンク

 

 

 

ページトップにスクロールするボタン1.4.3/jquery採用
ページのトップに戻るスクロールボタンを取り付ける手順解説
シリウスカスタマイズ

ページトップにスクロールするボタン1.4.3/jquery採用関連解説
シリウスぺージラストへスクロースするボタン取り付カスタマイズ方法
SIRIUS.シリウスカスタマイズ サイトの記事欄上部から サイト巻末まで逆スクロールするテキストボタン取り付けのカスタマイズで エントリーメニューへすぐ到達できます
記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ
シリウスの記事上部の案内メニューか記事内リンクをクリックすると 中段または下段の指定箇所へ自動スクロールするカスタマイズ設定の解説です