表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


テンプレートを作ってみる【37】

ページのトップへ戻るボタンを設定してみました<head>~</head>に下記のjsを設置しました
<script type="text/javascript" src="./template/more/js/scroll.js" /></script>
ボタンを設置する位置に下記を追記します
<a href="javascript:scrollTop(0,0)" onclick="slowdownScroll();return false;" onkeypress="slowdownScroll();return false;" title="このページのトップへ">▲</a>
今回はページャーの右側に設置しましたそのために前記事から少しHTMLとCSSを書き換えました
<!-- BEGIN page -->
<div id="pager">
<div class="paGer">{full_pager_link}</div>
<div class="pageTop"><a href="javascript:scrollTop(0,0)" onclick="slowdownScroll();return false;" onkeypress="slowdownScroll();return false;" title="このページのトップへ">▲</a></div>
</div>
<!-- END page -->
#pager {
width:640px;
height:12px;/*高さを設定*/
margin:0 auto 20px;
padding:10px;
background-color:#ffffff;
}
#pager span.current{
background-color:#ffffff;
padding:4px 7px;
color:#000000;
font-weight:bold;
}
#pager span a{
background-color:#ffffff;
color:#000000;
padding:4px 7px;
text-decoration:none;
}
#pager span a:hover,#pager span a:active {
background-color:#ffffff;
color:#ff6600;
text-decoration:none;
}
.paGer {float:left;}
.pageTop {float:right;}
.pageTop a {color:#000000;text-decoration:none;}
.pageTop a:link {color:#000000;text-decoration:none;}
.pageTop a:visited {color:#000000;text-decoration:none;}
.pageTop a:hover {color:#ff6600;text-decoration:underline;}
.pageTop a:active {color:#000000;text-decoration:none;}
このスクロールはJUGEM公式Javascriptなのでしょうか?他にもあるかもしれません
<!-- BEGIN page -->~<!-- END page -->で囲われた部分は個別記事(./?eid=**)では表示されないようです

スポンサーサイト


コメント
コメントする








   
この記事のトラックバックURL
トラックバック