ブログパーツ
ページナビを画面上部に移動したのでページトップへのリンクを設置することにしました。
ある程度スクロールするとスーッとページトップへのリンクボタンが表示される仕組みがあったので紹介します
。
詳しくは
コチラのページで説明されていますが、必要な個所だけ抜粋すると以下を実装すればよいだけです。
まずはテンプレートの<head>～</head>内に以下を追加します。（jquery.min.jsの追加は適宜行います。）
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var syncerTimeout = null ;
$(function() {v
$(window).scroll( function() {
if( syncerTimeout == null ) {
syncerTimeout = setTimeout( function() {
var element = $( '#page-top' );
var visible = element.is(':visible');
var now = $(window).scrollTop();
var under = $( 'body' ).height() - ( now + $(window).height() );
if( now > 400 && 200 < under ) {
if( !visible ) {
element.fadeIn('slow');
}
} else if( visible ) {
element.fadeOut('slow');
}
syncerTimeout = null;
} , 1000 );
}
});
$('#move-page-top').click(
function() {
$('html,body').animate({scrollTop:0} , 'slow');
}
);
});
</script>
テンプレートの<body>～</body>内に以下を追加します。
（テンプレートによりますが、このブログのテンプレートでは<!-- #l-main -->～<!-- /#l-main -->内に設置する必要がありました）
<div id="page-top" class="page-top">
<p><a id="move-page-top" class="move-page-top">▲</a></p>
</div>
スタイルシートに以下を追加します。
.page-top
{
display: none ;
margin: 0 ;
padding: 0 ;
}
.page-top p
{
margin: 0 ;
padding: 0 ;
position: fixed ;
right: 27px ;
bottom: 16px ;
}
.move-page-top
{
display: block ;
background: #D36015 ;
width: 50px ;
height: 50px ;
cursor: pointer ;
color: #fff ;
line-height: 50px ;
text-decoration: none ;
text-align: center ;
-webkit-transition:all 0.3s ;
-moz-transition:all 0.3s ;
transition:all 0.3s ;
}
@media screen and ( min-width:1130px )
{
.move-page-top:hover
{
opacity: 0.85 ;
}
}
スポンサーサイト
Follow @papepo100
コメント