Scroll

前言

  • 由於此專案HTML、CSS與JavaScript重點較多，因此將切三篇文章說明

功能說明


  1. Navbar :
    • RWD(響應式網頁設計)
    • 固定於畫面上方
    • 點擊按鈕將下滑至對應內容
  2. tour按鈕 : 點擊後下滑至tour部分
  3. 按鈕各自對應內容
  4. 回最上方之按鈕

HTML重點

  1. Navbar : 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <nav id="nav">
        <div class="nav-center">
        
            <!-- nav header -->
            <div class="nav-header">
            
                <!-- logo -->
                <img src="./logo.svg" class="logo" alt="logo" />
                
                <!-- 選單按鈕 -->
                <button class="nav-toggle">
                  <i class="fas fa-bars"></i>
                </button>
            </div>
            
            <!-- links -->
            <div class="links-container">
                <ul class="links">
                  <li>
                    <a href="#home" class="scroll-link">home</a>
                  </li>
                  <li>
                    <a href="#about" class="scroll-link">about</a>
                  </li>
                  <li>
                    <a href="#services" class="scroll-link">services</a>
                  </li>
                  <li>
                    <a href="#tours" class="scroll-link">tours</a>
                  </li>
                </ul>
            </div>
        </div>
    </nav>
    • 將整個Navbar的ID設為nav
    • 將選單按鈕的Class設為nav-toggle
    • 選單按鈕的icon一樣來自font awesome
    • 將整個按鈕選單<div>的Class設為links-container
    • 將整個按鈕選單<ul>的Class設為links
    • 將單一連結按鈕<a>元素的Class設為scroll-link
    • 四個連結按鈕的連結id等同於其名稱

  2. Banner

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="banner">
        <div class="container">
            <h1>scroll project</h1>
            <p>Lorem ipsum ...</p>
            
            <!-- Tour按鈕 -->
            <a href="#tours" class="scroll-link btn btn-white">explore tours</a>
            
        </div>
    </div>
    • Tour按鈕的Class一樣設為scroll-link

  3. 對應內容

    1
    2
    3
    4
    5
    6
    7
    <!-- about -->
    <section id="about" class="section">
      <div class="title">
        <h2>about <span>us</span></h2>
      </div>
    </section>
    <!-- services、contant皆與此相同 -->
    • 對應內容的id可以連結有相同連結id的按鈕
      • 例如，about按鈕的href="#about"，可以連結到about的對應內容

  4. footer

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- footer -->
    <footer class="section">
        <p>
            copyright © backroads travel tours company
            <span id="date"></span>. all rights reserved
        </p>
    </footer>

    <!-- 回頂層按鈕 -->
    <a class="scroll-link top-link" href="#home">
        <i class="fas fa-arrow-up"></i>
    </a>
    • 回頂層按鈕的class一樣設為scroll-link，連結id設為#home
    • copyright中的年份，將透過id="date"在JavaScript中控制