デイトラweb制作中級編 DAY26

スムーススクロールとフローティングアイテムを作る

ナビゲーションにスクロール機能を持たせる

HTML

要素に id名 をつけることでリンク先として指定できる

idを追加

<section id="card" class="card section"></section>
<section id="news" class="news section"></section>
<section id="price" class="price section"></section>
<section id="access" class="access section"></section>
<section id="contact" class="contact section"></section>

aタグのリンク先に(#+)id名を記入

<header class="header">
    <div class="header__inner inner">
        <h1 class="header__logo"><a href="/"><img src="img/logo.png" alt="The Company"></a></h1>
        <ul class="header__nav">
            <li><a href="#card" class="is-active">Card</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#price">Price</a></li>
            <li><a href="#access">Access</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</header>

<footer>
<!-- フッターのnavも -->
</footer>

jQuery

→ リンク先に3秒で移動するようにする

元のコード

jQuery('a[href^="#"]').on('click', function(){

    var header = jQuery('.header').innerHeight();
    var id = jQuery(this).attr('href');
    if ( id != '#') {
        position = jQuery(id).offset().top - header;
    }
    jQuery('html, body').animate({
        scrollTop: position
    },
    300);
});

メモ有のコード

// #から始まるURLがクリックされた時
jQuery('a[href^="#"]').on('click', function(){
    // 固定headerの高さを取得
    var header = jQuery('.header').innerHeight();
    // hrefで指定されたidを取得
    var id = jQuery(this).attr('href');
    // トップに戻るボタンで0の位置に移動
    var position = 0;
    // 変数id ≠ # の場合(#cardなど)
    if ( id != '#') {
        // idの位置 - 変数header
        position = jQuery(id).offset().top - header;
    }
    jQuery('html, body').animate({
        // 「position」までスクロール
        scrollTop: position
    },
    // 移動速度を指定(ミリ秒)
    300);
});

jQuery()

jQueryにおいては、「$()」と「jQuery()」は同じ関数

→ しかし他ライブラリを使う場合は「jquery()」と書かないとコンフリクトすることがある

innerHeight()

jQuery(' 対象の要素 ').innerHeight()

→ 要素の高さを取得

4パターンの取得方法

引用元:jQueryで高さの取得と設定(height,innerHeight,outerHeight)

offset()

jQuery(' 対象の要素 ').offset().top

→ HTML要素の表示位置を座標で取得する

トップに戻るボタンを編集する

HTML

リンク先は「#」を指定

<div class="to-top"><a href="#"><img src="./img/totop.png" alt=""></a></div>

SCSS

一定位置までスクロールしたらボタンを表示

.to-top {
    opacity: 0;
    visibility: hidden;

    &.is-show {
        opacity: 1;
        visibility: visible;
}

visibility

要素の可視・不可視を切り替えられるプロパティ

他の種類

visible(default)→ 要素が可視状態

collapse → 要素が不可視状態

hidden → 要素が不可視状態


※「hidden」は「display: none;」と異なり要素の領域は確保される

イメージ画像

引用元:display:noneとvisibility:hiddenの違いを確認しよう

jQuery

jQuery(window).on('scroll', function(){
    // 100pxよりもスクロールした場合
    if ( 100 < jQuery(this).scrollTop()) {
        // .is-showの付与と解除
        jQuery('.to-top').addClass('is-show');
    } else {
        jQuery('.to-top').removeClass('is-show');
    }
});

まとめ

今回はナビゲーションとトップへ戻るボタンを編集しました。

普段何気なく使っている機能ですが、自分で実装してみるとなかなか大変でした。

Boostnote にしっかりメモして次の機会に備えておきたいと思います!

コメントを残す

メールアドレスが公開されることはありません。