ページトップへスムーズにスクロールさせる。

2015年8月3日

今回は、ボタンをクリックしたら
ページのトップへ滑らかに遷移するというものを
jQueryを使って作成します。

１．jQueryのプラグインを入手する。

今回は、トップページにスムーズに戻るために
イージング関数が入ったプラグインを使用します。

サンプルコードについて

38行目までは、スクロールしているのが
分かるように適当な文字を入れています。

39行目ボタンを作成しています。

46行目のscriptタグ内で、
toTopをクリックしたときの処理を書いています。

47行目～49行目がアニメーションでページトップへ
ゆったりスクロールする処理を書いています。

今回はページのトップへスクロールさせたいので、
CSSｈｓ「scrollTop:0」と指定しています。

アニメーションにかかる時間は600/1000秒です。

「scrollTop」はjQuery独自に追加された
プロパティです。これを使用することで
ページのスクロールをすることができます。

51行目の「return false;」は今回は、
div id="main"　へのページ内リンクを止めるために
書いています。

これがないと、Topへをクリックしたときに
スクロールバーの部分がチラつくことがあります。

ブラウザによって違うスクロールの要素

今回のサンプルコードでアニメーションさせる要素を
$("html, body")と指定しています。これはブラウザに
よりスクロールする要素が違うからです。

ブラウザでのスクロール対象の要素
●html　IE,Firefox
●body　Chrome,Safari

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryUI Tab</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/plugin/jquery.easing.1.3.js"></script>
    
</head>
<body>
<div id="main">
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p id="toTop"><a href="#main">Topへ</a></p>

    
</div>
<script>
    $(function(){
    
        $("#toTop a").click(function(){
            $("html, body").animate({
                "scrollTop":0
            },600,"easeInOutExpo");
            
            return false;
        });
    });
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryUI Tab</title>

</head>

<body>

</div>

$(function(){

$("#toTop a").click(function(){

$("html, body").animate({

"scrollTop":0

},600,"easeInOutExpo");

return false;

});

</script>

</body>

</html>

-jQuery
-easing, jQuery, イージング, スクロール

comment コメントをキャンセル

jQuery

jQueryでスライドショーを作ってみる

タイトルの通りです。簡単なスライドショーを作成してみました。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>スライドショーを作ってみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <style>
        *{margin:0;padding:0;}
        
        .slideShow{
            position:relative;
            width:320px;
            height:180px;
            overflow:hidden;
        }
        .slideShow img{
            position:absolute;
            left:0;
            display:none;
        }
    </style>

</head>
<body>
<div class="slideShow">
    <img src="../img/0.JPG">
    <img src="../img/1.JPG">
    <img src="../img/2.JPG">
    <img src="../img/3.JPG">    
</div>
    
<script>
$(function(){
    
    /*
    each.～の箇所
    jQueryがHTMLの中から「.slideShow」というクラスを持った
    要素を探してきて、それぞれに対してこの括弧内の処理を実行する。
    
    今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。
    */
    $(".slideShow").each(function(){
        
        //全てのスライド
        var $slide = $(this).find("img"),
            
        //現在のスライドを示す番号を格納
            currentNum = 0;
        
        //スライドを徐々に表示する
        $slide.eq( currentNum ).fadeIn();
        
        //2000/1000=２秒間隔で「showNextSlide」を呼び出す
        setInterval( showNextSlide,2000);
        
        function showNextSlide(){
            /*
                $slide.lengthは、$slideの要素数が入っています。
                今回は画像が４枚なので「４」が格納されています。                
            */
            var nextSlideNum =( currentNum + 1 ) % $slide.length;
            
            //スライドを徐々に非表示する
            $slide.eq( currentNum ).fadeOut();

            //次のスライドを徐々に表示する            
            $slide.eq( nextSlideNum ).fadeIn();
            
            //現在の見ている画像番号に、「次の」番号を格納する
            currentNum = nextSlideNum;
        }
    });
});
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>スライドショーを作ってみる</title>

<style>

*{margin:0;padding:0;}

.slideShow{

position:relative;

width:320px;

height:180px;

overflow:hidden;

}

.slideShow img{

position:absolute;

left:0;

display:none;

}

</style>

</head>

<body>

</div>

$(function(){

each.～の箇所

jQueryがHTMLの中から「.slideShow」というクラスを持った

要素を探してきて、それぞれに対してこの括弧内の処理を実行する。

今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。

$(".slideShow").each(function(){

//全てのスライド

var $slide = $(this).find("img"),

//現在のスライドを示す番号を格納

currentNum = 0;

//スライドを徐々に表示する

$slide.eq( currentNum ).fadeIn();

//2000/1000=２秒間隔で「showNextSlide」を呼び出す

setInterval( showNextSlide,2000);

function showNextSlide(){

$slide.lengthは、$slideの要素数が入っています。

今回は画像が４枚なので「４」が格納されています。

var nextSlideNum =( currentNum + 1 ) % $slide.length;

//スライドを徐々に非表示する

$slide.eq( currentNum ).fadeOut();

//次のスライドを徐々に表示する

$slide.eq( nextSlideNum ).fadeIn();

//現在の見ている画像番号に、「次の」番号を格納する

currentNum = nextSlideNum;

}

});

</script>

</body>

</html>

: jQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの値を徐々に変更して、独自のアニメーションを作成できる命令です。括弧内にはCSSプロパティ、アニメーションのスピード、動き(easing)、コール ...

: jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。サンプルコードの実行結果はこちら今回使用したプラグイン・Masonry ・colorbox ・imag ...

jQuery

水平方向のアコーディオンメニュー

今回紹介するのは横にスライドするアコーディオンメニューです。実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HorrizontalAccordion</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.zaccordion.js"></script>

    <style>
    *{margin:0;padding:0;}
    ol,ul{list-style-type:none;}
        
    div#contents{
        width:920px;
        height:400px;
        padding:20px;
        background-color:brown;
        position:absolute;
        margin:-220px 0 0 -480px;
        left:50%;
        top:50%;
        -webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);
    }
    h1{
        width:110px;
        height:370px;
        position:absolute;
        top:20px;
        right:20px;
        padding:30px 0 0 50px;
        background-color:skyblue;}
    ul#contentsList{width:760px;}
        
        ul#contentsList li{
            width:460px;
            position:relative;
            overflow:visible;}
        ul#contentsList li:nth-of-type(1){
            background-color:yellow;}
        ul#contentsList li:nth-of-type(2){
            background-color:yellowgreen;}
        ul#contentsList li:nth-of-type(3){
            background-color:purple;}
        ul#contentsList li:nth-of-type(4){
            background-color:turquoise;}
        ul#contentsList li:nth-of-type(5){
            background-color:pink;}
        ul#contentsList li:nth-of-type(6){
            background-color:coral;}

            ul#contentsList li h2{
                position:absolute;
                top:0;
                right:0;
                height:400px;
                padding:50px 15px 0 0;
            /*    border-right:1px solid #ddd;*/
                background-color:aquamarine;}

            ul#contentsList li.frame-open h2{
                background-color:red;}
    </style>

</head>
<body>

<div id="contents">
    <h1></h1>
    <ul id="contentsList">
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
    </ul>
</div>

<script>
$(function(){
    
    //アコーディオンの設定
    var li = $("#contentsList li").toArray().reverse();
    $("contentsList").empty().append(li);
    
    $("#contentsList").zAccordion({
        timeout:1000,            // 自動スライド時の１スライド当たりの表示時間
        slideWidth:460,           // アコーディオンのコンテンツの全体の幅
        width:760,                // アコーディオンのコンテンツの全体の高さ
        height:400,               // スライドするコンテンツ１枚分の幅
        speed:440,                // スライドするコンテンツ１枚分の高さ
        startingSlide:5,          // 最初に表示するコンテンツ番号
        slideClass:"frame",                 // スライドさせるコンテンツのli要素に付すクラス名
        slideOpenClass:"frame-open",        // 開いているコンテンツのli要素に付すクラス名
        slideClosedClass:"frame-closed",     // 閉じているコンテンツのli要素に付すクラス名
        slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名
        easing:"easeInOutCubic",            // スライド時のアニメーション
        invert:true                         // 重なり順を逆にして見出しを右に持ってくる
    });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!doctype html>

<html>

<head>

<title>HorrizontalAccordion</title>

<style>

*{margin:0;padding:0;}

ol,ul{list-style-type:none;}

div#contents{

width:920px;

height:400px;

padding:20px;

background-color:brown;

position:absolute;

margin:-220px 0 0 -480px;

left:50%;

top:50%;

-webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);

}

h1{

width:110px;

height:370px;

position:absolute;

top:20px;

right:20px;

padding:30px 0 0 50px;

background-color:skyblue;}

ul#contentsList{width:760px;}

ul#contentsList li{

width:460px;

position:relative;

overflow:visible;}

ul#contentsList li:nth-of-type(1){

background-color:yellow;}

ul#contentsList li:nth-of-type(2){

background-color:yellowgreen;}

ul#contentsList li:nth-of-type(3){

background-color:purple;}

ul#contentsList li:nth-of-type(4){

background-color:turquoise;}

ul#contentsList li:nth-of-type(5){

background-color:pink;}

ul#contentsList li:nth-of-type(6){

background-color:coral;}

ul#contentsList li h2{

position:absolute;

top:0;

right:0;

height:400px;

padding:50px 15px 0 0;

/* border-right:1px solid #ddd;*/

background-color:aquamarine;}

ul#contentsList li.frame-open h2{

background-color:red;}

</style>

</head>

<body>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

$(function(){

//アコーディオンの設定

var li = $("#contentsList li").toArray().reverse();

$("contentsList").empty().append(li);

$("#contentsList").zAccordion({

timeout:1000, // 自動スライド時の１スライド当たりの表示時間

slideWidth:460, // アコーディオンのコンテンツの全体の幅

width:760, // アコーディオンのコンテンツの全体の高さ

height:400, // スライドするコンテンツ１枚分の幅

speed:440, // スライドするコンテンツ１枚分の高さ

startingSlide:5, // 最初に表示するコンテンツ番号

slideClass:"frame", // スライドさせるコンテンツのli要素に付すクラス名

slideOpenClass:"frame-open", // 開いているコンテンツのli要素に付すクラス名

slideClosedClass:"frame-closed", // 閉じているコンテンツのli要素に付すクラス名

slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名

easing:"easeInOutCubic", // スライド時のアニメーション

invert:true // 重なり順を逆にして見出しを右に持ってくる

});

</script>

</body>

</html>

今回使っているjQueryプラグイン ●jQuery ...

: jQuery

マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。サンプルコードの実行結果はこちら今回使用したプラグイン・imagesloaded ・jquer ...

タブを利用してコンテンツを表示させる。

パンくずメニューをスライドさせて表示させる。