<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 100);
return false;
});
});
});
</script>
#back-top {
position: fixed;
bottom: 5px;
right: 20px;
margin-right: 85%;
}
#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: 50px;
height: 50px;
display: block;
margin-bottom: 0px;
background:
#eae5e3 url(※用意した画像のURL) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
opacity:0.5;
}
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3><h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3><!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div><b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><b:widget id='HTML4' locked='false' title='Blogger templates' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'><h2 class='title'><data:title/></h2>
</b:if><header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='せきらら白書~備忘録~ (Header)' type='Header'/>
< /b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header><div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
< /b:section><script type=
"text/javascript"
>
// <![CDATA[
var
scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML:
'<img src="
自分の好みの画像をUploadしてURLを指定する" style="width:画像の幅を指定px; height:画像の高さを指定px" />' ,
//HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5},
//offset of control relative to right/ bottom of window corner
anchorkeyword:
'#top'
,
//Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:
false
, shouldvisible:
false
},
scrollup:
function
(){
if
(!
this
.cssfixedsupport)
//if control is positioned using JavaScript
this
.$control.css({opacity:0})
//hide control immediately after clicking it
var
dest=isNaN(
this
.setting.
scrollto)? this
.setting.scrollto : parseInt(
this
.setting.
scrollto) if
(
typeof
dest==
"string"
&& jQuery(
'#'
+dest).length==1)
//check element set by string exists
dest=jQuery(
'#'
+dest).offset()
.top else
dest=0
this
.$body.animate({scrollTop: dest},
this
.setting.scrollduration);
},
keepfixed:
function
(){
var
$window=jQuery(window)
var
controlx=$window.scrollLeft() + $window.width() -
this
.$control.width() -
this
.controlattrs.offsetx
var
controly=$window.scrollTop() + $window.height() -
this
.$control.height() -
this
.controlattrs.offsety
this
.$control.css({left:
controlx+ 'px'
, top:controly+
'px'
})
},
togglecontrol:
function
(){
var
scrolltop=jQuery(window).
scrollTop() if
(!
this
.cssfixedsupport)
this
.keepfixed()
this
.state.shouldvisible=(
scrolltop>= this
.setting.
startline)? true
:
false
if
(
this
.state.shouldvisible && !
this
.state.isvisible){
this
.$control.stop().animate({
opacity:1}, this
.setting.fadeduration[0])
this
.state.isvisible=
true
}
else
if
(
this
.state.shouldvisible==
fal
se &&
this
.state.isvisible){
this
.$control.stop().animate({
opacity:0}, this
.setting.fadeduration[1])
this
.state.isvisible=
false
}
},
init:
function
(){
jQuery(document).ready(
functio
n ($){
var
mainobj=scrolltotop
var
iebrws=document.all
mainobj.cssfixedsupport=!
iebrws || iebrws && document.compatMode== "
CSS1Compat" && window.XMLHttpRequest
//not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode==
"
CSS1Compat" ? $(
'html'
) : $(
'body'
)) : $(
'html,body'
)
mainobj.$control=$(
'<div id="topcontrol">'
+mainobj.
controlHTML+ '</div>'
)
.css({position:mainobj.
cssfixedsupport? 'fixed'
:
'absolute'
, bottom:mainobj.controlattrs.
offsety, right:mainobj.controlattrs. offsetx, opacity:0, cursor: 'pointer'
})
.attr({title:
'Scroll Back to Top'
})
.click(
function
(){mainobj.
scrollup(); return
false
})
.appendTo(
'body'
)
if
(document.all && !window.XMLHttpRequest && mainobj.$control.text()!=
''
)
//loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:
mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$(
'a[href="'
+ mainobj.anchorkeyword +
'"]'
).click(
function
(){
mainobj.scrollup()
return
false
})
$(window).bind(
'scroll resize'
,
function
(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
// ]]>
</script>
コメント