久久久久高潮综合影院,在线无码视频免费播放,久久久久黄色毛片

技術頻道 - html技術

#純CSS實現(xiàn)#網頁返回頂部按鈕設計【演示/源碼】

作者:admin 時間:2022-8-13 9:23:13 瀏覽:

本文介紹一個返回頂部的按鈕設計，它是用純CSS實現(xiàn)的，無需用到JavaScript。

#純CSS實現(xiàn)#網頁返回頂部按鈕設計

demo download

實例介紹

當屏幕內容往上滾出屏幕時，右下角就出現(xiàn)一個按鈕，點擊該按鈕，網頁滾到頂部。

該實例的特點是無需用到JavaScript，而是純CSS實現(xiàn)的。

完整HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

<style>
body {
  display: grid;
  grid-template-columns: 1fr 0px; 
  font-family: system-ui, sans-serif;
  background: #eee;
}
.top {
  --offset: 100px; 
  
  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));

  width: 60px;
  aspect-ratio: 1;
  background: #ff8b24;
  border-radius: 10px;
  font-size: 0;
}
.top:before {
  content: "";
  position: absolute;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}
h1 {
  font-size: 3rem;
}
p {
  font-size: 1.5rem;
  text-align:justify;
}
body > div {
  margin-inline: max(3px,50% - 800px/2);
}

html,
body {
scroll-behavior: smooth;
}
</style>

</head>

<body translate="no" >

  <div>

    <h1>卡卡網</h1>
    <h2 >卡卡網簡介</h2>
    <p>卡卡網建立于2009年4月，是非盈利性網站，沒有任何收費項目，所有廣告收入全部用于支付服務器和網站的日常開銷。本站旨在為廣大網站建設人員提供專業(yè)的網站測速和優(yōu)化服務，以及為廣大網民提供網絡速度測試服務。本站提供的在線測速服務是完全免費的，無須注冊便可使用。</p>
    <p>卡卡網是國內站長和IDC商檢測網絡線路和網站測速的第三方工具之一，每天為超過1萬的網站提供測速服務，專業(yè)、專心、專注，為卡卡網贏得了良好的口碑和業(yè)界的肯定。</p>

    <h2 >卡卡網簡介</h2>
    <p>卡卡網建立于2009年4月，是非盈利性網站，沒有任何收費項目，所有廣告收入全部用于支付服務器和網站的日常開銷。本站旨在為廣大網站建設人員提供專業(yè)的網站測速和優(yōu)化服務，以及為廣大網民提供網絡速度測試服務。本站提供的在線測速服務是完全免費的，無須注冊便可使用。</p>
    <p>卡卡網是國內站長和IDC商檢測網絡線路和網站測速的第三方工具之一，每天為超過1萬的網站提供測速服務，專業(yè)、專心、專注，為卡卡網贏得了良好的口碑和業(yè)界的肯定。</p>

    <h2>卡卡網簡介</h2>
    <p>卡卡網建立于2009年4月，是非盈利性網站，沒有任何收費項目，所有廣告收入全部用于支付服務器和網站的日常開銷。本站旨在為廣大網站建設人員提供專業(yè)的網站測速和優(yōu)化服務，以及為廣大網民提供網絡速度測試服務。本站提供的在線測速服務是完全免費的，無須注冊便可使用。</p>
    <p>卡卡網是國內站長和IDC商檢測網絡線路和網站測速的第三方工具之一，每天為超過1萬的網站提供測速服務，專業(yè)、專心、專注，為卡卡網贏得了良好的口碑和業(yè)界的肯定。</p>

  </div>
  <a href="#" class="top">返回頂部</a>
</body>

</html>