スクロールするとヘッダーとトップへ戻るボタンが固定されるjs（jQuery）

ロッチくん

少しスクロールするとヘッダーとトップへ戻るボタンが固定されるUIを実装したいニャ

ヘッダーの固定はposition: fixed;で簡単に実装可能ですが、ある程度ページをスクロールするとヘッダーやトップへ戻るボタンが実装されるページをjQueryで作っていきます。

はじめに
コード
最後に

はじめに

最初に動きを実装したデモサイトがこちら。メインビジュアルを過ぎたあたりでヘッダーとトップへ戻るボタンがフワッと出てきます。ちなみにスムーススクロールはhtmlにscroll-behavior: smooth;を指定することで簡単に実装可能です。

詳しくはこちらの記事をご覧ください。

まずはjQueryの読み込みをして準備を整えましょう。

jQueryの読み込み方法

jQueryを読み込むにはダウンロードしてサーバーにアップロードする方法とCDNで読みこむ方法とありますが、ここでは手軽にすぐ読み込めるCDNを使った方法を紹介します。

具体的なコードは以下になります。

コード

HTML

<header>
    <div class="header-inner">
        <h1>サイトタイトル</h1>
        <nav>
            <ul>
                <li>home</li>
                <li>about</li>
                <li>section</li>
                <li>contact</li>
            </ul>
        </nav>
    </div>
</header>
<div id="wrapper">
    <div class="main-visual">ここにメインヴィジュアル</div>
    <section class="container">
        <p>↓↓↓↓↓↓　　ここにコンテンツ　　↓↓↓↓↓↓</p>
    </section>
</div>
<div id="page-top"><a href="#"></a></div>

CSS

html {
    scroll-behavior: smooth;
}
body {
    position: relative;
}
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 100;
    background-color: #f0f0f0;
    transition: 0.5s;
}

header.is-fixed {
    position: fixed;
    height: 70px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 100%;
}

nav {
    width: 50%;
}

nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#wrapper {
    padding-top: 60px;
}
.main-visual {
    width: 100%;
    height: calc(100vh - 60px);
    background-color: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    max-width: 1100px;
    margin: 200px auto 0;
    text-align: center;
}

p {
    font-size: 16px;
    margin-bottom: 2000px;
}

#page-top {
    position: fixed;
    bottom: 55px;
    right: 55px;
    display: none;
}
#page-top a {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: inline-block;
    background-color: rgba(0,0,0,.6);
    transition: .3s;
}
#page-top a::before {
    content: "";
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: .3s;
}
#page-top a:hover {
    background-color: rgba(0,0,0,.5);
}
#page-top a:hover::before {
    top: 50%;
}

JavaScript

$(window).scroll(function () {
    var win = $(window);
    var scroll = win.scrollTop();
    var windowHeight = win.height();
    if (scroll >= windowHeight) {
        $("header").addClass("is-fixed");
        $("#page-top").fadeIn(500);
    } else {
        $("header").removeClass("is-fixed");
        $("#page-top").fadeOut(500);
    }
});

最後に

かなり基本的な動作ですが、最初からヘッダーやトップへ戻るボタンを固定するよりUI的に優れていると感じます。

スクロールするとヘッダーとトップへ戻るボタンが固定されるjs（jQuery編）

はじめに

コード

HTML

CSS

JavaScript

最後に

コメント