呦交国产在线,欧美亚洲综合另类,国产欧美日本精品视频

技術(shù)頻道 - html技術(shù)

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

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

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

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

demo download

實例介紹

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

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

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

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

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

</html>