<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[varscrolltotop={//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 corneranchorkeyword:'#top',//Enter href value of HTML anchors on the page that should also act as "Scroll Up" linksstate: {isvisible:false, shouldvisible:false},scrollup:function(){if(!this.cssfixedsupport)//if control is positioned using JavaScriptthis.$control.css({opacity:0})//hide control immediately after clicking itvardest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if(typeofdest=="string"&& jQuery('#'+dest).length==1)//check element set by string existsdest=jQuery('#'+dest).offset().top elsedest=0this.$body.animate({scrollTop: dest},this.setting.scrollduration);},keepfixed:function(){var$window=jQuery(window)varcontrolx=$window.scrollLeft() + $window.width() -this.$control.width() -this.controlattrs.offsetxvarcontroly=$window.scrollTop() + $window.height() -this.$control.height() -this.controlattrs.offsetythis.$control.css({left:controlx+ 'px', top:controly+'px'})},togglecontrol:function(){varscrolltop=jQuery(window).scrollTop() if(!this.cssfixedsupport)this.keepfixed()this.state.shouldvisible=(scrolltop>= this.setting.startline)? true:falseif(this.state.shouldvisible && !this.state.isvisible){this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])this.state.isvisible=true}elseif(this.state.shouldvisible==false &&this.state.isvisible){this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])this.state.isvisible=false}},init:function(){jQuery(document).ready(function ($){varmainobj=scrolltotopvariebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode== "CSS1Compat" && window.XMLHttpRequest//not IE or IE7+ browsers in standards modemainobj.$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(); returnfalse}).appendTo('body')if(document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')//loose check for IE6 and below, plus whether control contains any textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="'+ mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()returnfalse})$(window).bind('scroll resize',function(e){mainobj.togglecontrol()})})}}scrolltotop.init()// ]]></script>

コメント