我正在嘗試使用純 HTML/CSS 創建單頁簡歷。我正在實作一個導航欄，這樣當單擊鏈接到 div（在同一頁面上）的按鈕時，它會自動向下滾動到該部分（具有滾動效果）。如何才能做到這一點？謝謝。
uj5u.com熱心網友回復：
嘿，我模擬了一些非常簡單的東西供你嘗試。您可以通過使用<a>鏈接到每個元素的 id 的標簽來實作您正在尋找的內容。要使滾動順暢，只需使用一些 CSS scroll-behaviour:smooth。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nav-bar</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="nav-bar">
<ul class="nav-link">
<a href="#intro">Intro</a>
</ul>
<ul class="nav-link">
<a href="#work-experience">Work Experience</a>
</ul>
<ul class="nav-link">
<a href="#education">education</a>
</ul>
<ul class="nav-link">
<a href="#intrests">intrests</a>
</ul>
<ul class="nav-link">
<a href="#refrences">refrences</a>
</ul>
</div>
<div class="container">
<div id="intro" class="section">INTRO</div>
<div id="work-experience" class="section">WORK EXPERIENCE</div>
<div id="education" class="section">EDUCATION</div>
<div id="intrests" class="section">INTERESTS</div>
<div id="refrences" class="section">REFRENCES</div>
</div>
</body>
</html>
用一些 css 像
html {
scroll-behavior: smooth;
}
.nav-bar {
display: flex;
list-style: none;
width: 100%;
background: black;
color: white;
}
.nav-link > a {
text-decoration: none;
color: white;
font-size: 1.5rem;
}
.section {
height: 50vh;
text-align: center;
font-size: 3rem;
}
uj5u.com熱心網友回復：
例如，只需創建 href 或如何以正常方式打開指向 div id 的鏈接；如果您的代碼是頂部 ( <a></a>)上的鏈接，只需在 ( <a href="#divid"></a>) href 中放置一個 ID 。設定scroll-behavior在CSS中scroll-behavior: smooth;為你的身體或鏈接的平滑滾動。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/372671.html