ページトップへ戻るボタンの実装方法
ブログパーツ
ページナビを画面上部に移動したのでページトップへのリンクを設置することにしました。
ある程度スクロールするとスーッとページトップへのリンクボタンが表示される仕組みがあったので紹介します 。
詳しくはコチラのページで説明されていますが、必要な個所だけ抜粋すると以下を実装すればよいだけです。
まずはテンプレートの<head>～</head>内に以下を追加します。（jquery.min.jsの追加は適宜行います。）
テンプレートの<body>～</body>内に以下を追加します。
（テンプレートによりますが、このブログのテンプレートでは<!-- #l-main -->～<!-- /#l-main -->内に設置する必要がありました）
スタイルシートに以下を追加します。
ページナビを画面上部に移動したのでページトップへのリンクを設置することにしました。ある程度スクロールするとスーッとページトップへのリンクボタンが表示される仕組みがあったので紹介します 。
詳しくはコチラのページで説明されていますが、必要な個所だけ抜粋すると以下を実装すればよいだけです。
まずはテンプレートの<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>
<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>
<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 ;
}
}
{
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 ;
}
}
スポンサーサイト
コメント