デイトラweb制作中級編 DAY26
nakano
スムーススクロールとフローティングアイテムを作る
ナビゲーションにスクロール機能を持たせる
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 にしっかりメモして次の機会に備えておきたいと思います！
