ボタンを回転させて表示する。

ブラウザの上部からぶら下がっているボタンです。スクロールが停止した後、一定時間おいて回転しながら現れるボタンを、今回作成します。

使用したjQueryプラグイン
1.jquery.easing.1.3.js
2.jQueryRotate.js
3.jquery.timers.js
4.jquery.scrollTo.js

詳しい説明はサンプルコードにコメントアウトしました。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>btnShowWithRotate</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/plugin/jquery.easing.1.3.js"></script>
    
    <script src="js/plugin/jQueryRotate.js"></script>
    <script src="js/plugin/jquery.timers.js"></script>
    <script src="js/plugin/jquery.scrollTo.js"></script>
    <script src="js/plugin/btnShowWithRotate.js"></script>

    <style>
    #container{
        width:960px;
        margin:0 auto;
        background-color:#f0f0f0;}
    #pageTopBtn{
        width:466px;
        height:50px;
        position:fixed;
        top:-50px;
        right:-150px;
        text-align:right;
        background-color:aqua;
    }
    </style>

</head>
<body>

    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <div id="pageTopBtn">
        <a href="javascript:pageScroll()">
            PAGETOP
        </a>
    </div>

<script>
    
//PAGETOPがクリックされた時の命令
function pageScroll(obj){
    if( !obj ){
        $.scrollTo( {top:0,left:0},scrollSpeed,{easing:"easeInOutQuart"});
    }else{
        $.scrollTo( obj,scrollSpeed,{easing:"easeInOutQuart"});        
    }
}
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>btnShowWithRotate</title>

<style>

#container{

width:960px;

margin:0 auto;

background-color:#f0f0f0;}

#pageTopBtn{

width:466px;

height:50px;

position:fixed;

top:-50px;

right:-150px;

text-align:right;

background-color:aqua;

}

</style>

</head>

<body>

PAGETOP

</a>

</div>

//PAGETOPがクリックされた時の命令

function pageScroll(obj){

if( !obj ){

$.scrollTo( {top:0,left:0},scrollSpeed,{easing:"easeInOutQuart"});

}else{

$.scrollTo( obj,scrollSpeed,{easing:"easeInOutQuart"});

}

</script>

</body>

</html>

//ここから変数宣言

    //回転表示対象のIDを指定する
    var idPageTop = "#" + "pageTopBtn";

    //ページトップボタンが表示されるスクロール量
    var pageTopPosi = 50;

    //スクロール又は、リサイズが完了してからボタンが表示されるまでの時間
    var timeAfterDone = 300;

    //ボタン表示スピード
    var displaySpeed = 500;

    //ボタン非表示スピード
    var hideSpeed = 500;

    //"PAGETOP"をクリックしたときの
    //ページトップへのスクロールスピード
    var scrollSpeed = 600;
    
//ここまで変数宣言

$(function(){
   
    //選択枠を隠す
    $("a").focus(function(e){this.blur()});

    //ボタンの初期設定　180度回転
    $(idPageTop).rotate(180);
    
    //スクロールとブラウザのサイズを変更したときにする処理
    function onScroll(event){
        $(idPageTop)
        .stopTime()　　　　　　　　//作動中のタイマーは止める
        .trigger("scrollStart") //58行目 bind(scrollStar...の箇所の処理を実行
        .oneTime(timeAfterDone, //スクロール又は、ブラウザサイズ変更が完了し、
                                //timeAfterDone　ミリ秒経ってから、
                                //bind(scrollOrResizeEnd...の箇所の処理を実行
            function(){ $(this).trigger("scrollOrResizeEnd")});
    }

    //スクロール、リサイズ時
    $(window).bind("scroll resize",onScroll);

    //ボタンを表示する
    $(idPageTop).bind("scrollOrResizeEnd",function(event){
        if( $(window).scrollTop() >= pageTopPosi ){
            $(this).addClass("show").rotate({
              duration: displaySpeed,
              animateTo: 90,
              easing: $.easing.easeOutElastic,
              callback:function(){     
              }
           });
        }
    });

    //ボタンを非表示にする。
    $(idPageTop).bind("scrollStart",function(event){
        if( $(this).hasClass("show") ){
            $(this).removeClass("show").rotate({
                duration: hideSpeed,
                animateTo: 180,
                easing: $.easing.easeOutQuart,
                callback:function(){
                }
            });
        }
    });
});

//ここから変数宣言

//回転表示対象のIDを指定する

var idPageTop = "#" + "pageTopBtn";

//ページトップボタンが表示されるスクロール量

var pageTopPosi = 50;

//スクロール又は、リサイズが完了してからボタンが表示されるまでの時間

var timeAfterDone = 300;

//ボタン表示スピード

var displaySpeed = 500;

//ボタン非表示スピード

var hideSpeed = 500;

//"PAGETOP"をクリックしたときの

//ページトップへのスクロールスピード

var scrollSpeed = 600;

//ここまで変数宣言

$(function(){

//選択枠を隠す

$("a").focus(function(e){this.blur()});

//ボタンの初期設定　180度回転

$(idPageTop).rotate(180);

//スクロールとブラウザのサイズを変更したときにする処理

function onScroll(event){

$(idPageTop)

.stopTime()　　　　　　　　//作動中のタイマーは止める

.trigger("scrollStart") //58行目 bind(scrollStar...の箇所の処理を実行

.oneTime(timeAfterDone, //スクロール又は、ブラウザサイズ変更が完了し、

//timeAfterDone　ミリ秒経ってから、

//bind(scrollOrResizeEnd...の箇所の処理を実行

function(){ $(this).trigger("scrollOrResizeEnd")});

}

//スクロール、リサイズ時

$(window).bind("scroll resize",onScroll);

//ボタンを表示する

$(idPageTop).bind("scrollOrResizeEnd",function(event){

if( $(window).scrollTop() >= pageTopPosi ){

$(this).addClass("show").rotate({

duration: displaySpeed,

animateTo: 90,

easing: $.easing.easeOutElastic,

callback:function(){

}

});

}

});

//ボタンを非表示にする。

$(idPageTop).bind("scrollStart",function(event){

if( $(this).hasClass("show") ){

$(this).removeClass("show").rotate({

duration: hideSpeed,

animateTo: 180,

easing: $.easing.easeOutQuart,

callback:function(){

}

});

}

});