運用範例練習，了解 jQuery 導覽按鈕引導全頁滑動
準備 HTML＆CSS 部份
<body>
<header>
<div id="logo">LOGO</div>
<nav>
<a href="#sec1">Section1</a>
<a href="#sec2">Section2</a>
<a href="#sec3">Section3</a>
<a href="#sec4">Section4</a>
</nav>
</header>
<section id="sec1">Section1</section>
<section id="sec2">Section2</section>
<section id="sec3">Section3</section>
<section id="sec4">Section4</section>
</body>
<style>
* { margin: 0; box-sizing: border-box; }
body { font-family: sans-serif; font-weight: bold; }
header { background-color: rgba(0, 0, 0, 0.7);
position: fixed; left: 0; right: 0; top: 0; padding: 15px 50px;
display: flex; justify-content: space-between; align-items: center; }
#logo { color: #f00; font-size: 40px; }
nav a { color: #fff; text-decoration: none; font-size: 20px; padding: 10px; }
nav a:hover { color: #f00; }
section { min-height: 100vh; background-color: lightgray; font-size: 50px;
display: flex; justify-content: center; align-items: center; }
#sec2, #sec4 { background-color: gray; }
</style>
JavaScript＆jQuery 部份---導覽按鈕引導全頁滑動
WEB