Learning site for website creation

T07:ページトップへ戻る 作成

公開日:2021年11月14日 更新日:2021年11月14日

ページトップへ戻る 作成

tmp_common.html

<div class="Content">
        :
  <main class="Main">
          :
  </main>

  <div class="Pagetop">
    <a class="Pagetop_link" href="#top">▲</a>
  </div>
</div>

ページトップへ戻る デザインを定義

css/style.css

    :
/* パーツデザイン */
@import url(_Box.css);
@import url(_Footer.css);
@import url(_HeaderPC.css);
@import url(_Logo.css);
@import url(_NavPC.css);
@import url(_Pagetop.css);
@import url(_Tel.css);

css/_NavPC.css

/* Pagetop */
.Pagetop {
  position: sticky;
  bottom: 0;
  margin-bottom: 0;
  margin-right: 30px;
  z-index: 1000;
}

.Pagetop_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  color: #fff;
  margin-left: auto;
  margin-bottom: 20px;
  font-size: 1.5em;
  background-color: 
    rgba(50, 50, 50, 0.5);
  transition: 
    background-color 0.5s;
}

.Pagetop_link:hover {
  background-color: #222;
}

完成図

テンプレートコーディング