技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

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

作者:admin    時(shí)間:2022-8-13 9:23:13    瀏覽:

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

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

demodownload

實(shí)例介紹

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

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

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

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

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

</html>

代碼分析

.top {
  --offset: 100px;
  ...
}

--offset 是控制按鈕出現(xiàn)的變量，100px 表示當(dāng)網(wǎng)頁向上滾動(dòng)100px時(shí)，出現(xiàn)按鈕。

body {
  scroll-behavior: smooth;
}

scroll-behavior: smooth; 表示點(diǎn)擊按鈕時(shí)網(wǎng)頁是滾動(dòng)到頂部，如果把該CSS語句去掉，則是跳到頂部。

總結(jié)

本文介紹了一個(gè)返回頂部的按鈕設(shè)計(jì)，它是用純CSS實(shí)現(xiàn)的，無需用到JavaScript，推薦使用，值得收藏。

相關(guān)文章

x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */