亚洲高潮在线观看,黄色网站免费观看大全

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

純CSS實(shí)現(xiàn)的上下滑動翻頁【演示/源碼下載】

作者:admin 時(shí)間:2023-2-21 19:35:55 瀏覽:

本文介紹一個(gè)純CSS實(shí)現(xiàn)的上下滑動翻頁效果，在這之前，我也介紹過左右滑動翻頁的實(shí)例，如有興趣可看下面文章：

上下左右“滑動式”翻頁過渡效果2例

本實(shí)例介紹

點(diǎn)擊頂部的導(dǎo)航按鈕，網(wǎng)頁滑動翻滾到相應(yīng)的內(nèi)容。

本實(shí)例是純CSS實(shí)現(xiàn)，代碼簡單易用，無需用到JavaScript腳本，也無需引用第三方插件庫文件。

demo download

HTML代碼

<body>
  <nav>
    <a href="#page-1">第一頁</a>
    <a href="#page-2">第二頁</a>
    <a href="#page-3">第三頁</a>
  </nav>
  <section id="page-1">Page #1</section>
  <section id="page-2">Page #2</section>
  <section id="page-3">Page #3</section>
</body>

<nav></nav>標(biāo)簽是頂部導(dǎo)航，<a></a>標(biāo)簽是按鈕鏈接。

<section></section>標(biāo)簽是內(nèi)容（頁）。

CSS代碼

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

nav {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  text-align: center;
  background: #212121;
  padding: 10px;
}

nav a {
  color: #FFF;
  text-decoration: none;
  padding: 0 10px;
}

section {
  width: 100vw;
  height: 100vh;
  text-align: center;
  color: #FFF;
  background: red;
  font-size: 60px;
  font-weight: bold;
  line-height: 100vh;
}

#page-1 { background: #F03823; }
#page-2 { background: #FCA101; }
#page-3 { background: #66E017; }