ドロワーメニューとトップページヘ戻るボタンの実装

12344 ワード
JavaScript 学習記録 デイトラ jQuery 備忘録 JavaScript テキストリンク

デイトラWeb制作コース中級編DAY5の学び

【この記事に書いてあること】

【制作物】

　【学び】

1

【ドロワーメニュー】

index.html
 <a href="#" class="drawer">コース一覧</a>
  　<ul class="drawer-list">
       　<li class="drawer-word"><a href="#title">初級</a></li>
         <li class="drawer-word"><a href="#title">中級</a></li>
         <li class="drawer-word"><a href="#title">上級</a></li>
    </ul>
style.css

.drawer-list {
    display: none;
    font-size: 15px;
    line-height: 36px;
    color: #082B48;
    text-align: center;
    background-color: #fafafa;
    border: 1px solid;
}

.drawer-word {
    border: 1px solid;
    font-weight: 600;
}
maiin.js
$(function () {
    $(".drawer").click(function () {
        $(".drawer-list").slideToggle();
    });
});

⬇

2

【トップページヘ戻るボタン】

index.html
  <div id="page_top">
    <a href="#">🔝</a>
  </div>
style.css
#page_top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 60px;
    background: #70aeed;
    opacity: 0.8;
    border-radius: 50%;
}

#page_top a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    margin-top: 3px;
}
maiin.js
jQuery(function () {
    var pagetop = $('#page_top'); //page-topが「#pagetop」を取得

    pagetop.hide();//特定のHTML要素を非表示にする。

    $(window).scroll(function () { //widowをスクロースする

        if ($(this).scrollTop() > 80) {  //80pxスクロールしたら表示

            pagetop.fadeIn(300);//0.3秒かけてフェードイン

        } else {
            pagetop.fadeOut(300);//0.3秒かけてフェードアウト
        }
    });



    pagetop.click(function () {　//pagetopをクリックしたら

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

            scrollTop: 0 //画面の最上部の位置に移動するという意味

        }, 500); //0.5秒かけてトップへ移動

        return false;  //処理の最後に記述する
});
});

⬇