flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

サイドバー強化【記事のTOPにスクロールしてくれるボタン作成】

Scroll to the top

 <script type="text/JavaScript">
/*Scroll to the Top       */

click = 0;
y = 1200;

function Scroll_to_the_top(){

if(click == 1){click--; y = 1200;}

else if(click == 0){

window.scrollTo(0, y);
y-=10;
if(y <= 0){StopTime(); click++;}
stoper_Time = setTimeout("Scroll_to_the_top()",1);

}

}

function StopTime(){
clearTimeout(stoper_Time);
}

</script>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/flandlescarlet/20120119/20120119192047.png?1326968454" onClick="Scroll_to_the_top()" style="position:fixed;bottom:10px; right:10px; width: 40px; height: 40px;">

試作品です。効果は実際にここのブログで試してみてください。

滑らかにTOPまで戻るようにしています。

 

すでにこのてのライブライは開発されていますが

jQuery始動が多いため、はてなblogでは活用できません

そこでサイドバー特有の、記事に書かない事を利用してスクリプトを埋め込んでみました。

これならば、CSSと同様に半永久的にスクリプトは稼働します。

改善する部分が多少あるので直していきたいと思います。