サイトマップ
HTMｌとCSS構造追加でスクロールアップボタンを組み込む手順
シリウスレスポンシブ構造での標準装備で備えあるページトップへ戻るボタンではなく
外部HTMｌとCSS追加で、デザインおよび動きが異なるスクロールアップボタンを
組み込む手順のご案内になります
作動は当ページの右端に置いておりますので参考にしてください
導入以前のご注意ごと
外部からの構造を追加してもデフォルトのページトップへ戻るボタンは
そのまま表示され邪魔になるのですね
レスポンシブ対応のテンプレートであるが故対応の選択法は複数ございます
一つは、PC画面でのみ、外部の戻るボタンは反映させて
デフォルトは非表示とする
で、スマートフォン画面では、外部の戻るボタンをそのまま反映して
デフォルトの戻るボタンは非表示とする
どちらのデバイスでもデフォルトは非表示として外部の戻るボタンを反映させる
自分で何言ってんだか混乱してきますが、組み合わせはCSSでも可能であれば
HTMLでもわずかな選択が可能です
一つ目の選択
PCでもスマートフォンでもデフォルトは非表示として、外部の戻るボタンのみで
作動させる
当サイトがその例です
画面を狭めると作動がご理解できます
ま、これが一番簡単なのですが...最初はこれで行きます
その他の指定方法は、後ほど追記します
作動について
導入しても、プレビュー画面では出現しますが、クリックしても瞬間移動で
滑らかなスクロールの動きではありません
サーバーにアップ以降は滑らかに動きます
1工程
まず、ＨＴＭＬテンプレートに追加する記述
記述には、1.4.2/jquery.min.jsプラグインが含まれています
プラグインはなくとも作動しますが、何かしらの影響で動きがぎこちないときは
サーバーに入れてください
以下の記述を
<head>～</head>内に張り付けます
トップ、カテゴリ、エントリ、その他も含めてテンプレートに張り付け
ここから
<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>
ここまで
</head>
2の工程
ＨＴＭＬ内にもう一つ
下部位置から上にスクロールしたときの指定位置に置く記述
<body>の直下に置きます
<body>
<div class="backtotop"><a href="#top">TOP</a></div>
ページの最上を指定しているので<a href="#top">としていますが
コンテンツの最上部で」止める場合は、contentsに書き換えてください
3の工程
スタイルシートでのＣＳＳ記述
以下項目をスタイルシートの一番下、他の位置でもよい
張り付けてください
div.backtotop {
position:fixed;
bottom:20px;
right:15px;
z-index: 9000;
}
div.backtotop a {
display:block;
width:30px;
height:30px;
line-height:30px;
padding:20px;
color:#FFF;
font-weight:bold;
background-color:#333;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
ここまで
4の工程
最後の指定は、二通りあります
どちらを選択しても、結果同じです
一つ目 ＨＴＭＬで、進める
ＨＴＭＬテンプレートに戻り、デフォルトの戻りボタンを非表示とします
下へ ほとんど最後の行付近に移動すると、以下の項目がありますので
削除してください
<div id="pagetop"><a href="#top">このページの先頭へ戻る</a></div>
削除すると、ＰＣでもスマートフォンでもデフォルトの戻りボタンは出現しません
二つ目 スタイルシートで非表示の指定に書き換える
下記項目へ進んで
display: block;の記述をdisplay: ｎｏｎｅ:に書き換えます
/* ページ上部へ戻る
==================================================
*/
#pagetop {
bottom: -3px;
clear: both;
position: absolute;
right: 10px;
z-index: 5;
}
#pagetop a {
background-image: url(img/pagetop_button.png);
background-position: left top;
background-repeat: no-repeat;
display: none; ここ、書き換えております
height: 28px;
overflow: hidden;
text-indent: -9999px;
width: 100px;
}
これで完了です
ボタン背景の色合いやフォントカラーはＣＳＳコードで変えてください
