#html #css #web #navbar
Вопрос:
Я пытаюсь создать резюме на одной странице, используя чистый HTML/CSS. Я внедряю навигационную панель таким образом, что при нажатии кнопки, которая ссылается на div (на той же странице), она автоматически прокручивается до этого раздела (с эффектом прокрутки). Как это можно сделать? Спасибо.
Ответ №1:
Эй, я придумал для тебя кое — что действительно простое, чтобы ты мог попробовать. Вы можете достичь того, что ищете, используя lt;agt; теги, которые ссылаются на идентификатор каждого элемента. Чтобы сделать прокрутку плавной, просто используйте некоторые CSS scroll-behaviour:smooth .
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /gt; lt;titlegt;Nav-barlt;/titlegt; lt;link rel="stylesheet" href="styles.css" /gt; lt;/headgt; lt;bodygt; lt;div class="nav-bar"gt; lt;ul class="nav-link"gt; lt;a href="#intro"gt;Introlt;/agt; lt;/ulgt; lt;ul class="nav-link"gt; lt;a href="#work-experience"gt;Work Experiencelt;/agt; lt;/ulgt; lt;ul class="nav-link"gt; lt;a href="#education"gt;educationlt;/agt; lt;/ulgt; lt;ul class="nav-link"gt; lt;a href="#intrests"gt;intrestslt;/agt; lt;/ulgt; lt;ul class="nav-link"gt; lt;a href="#refrences"gt;refrenceslt;/agt; lt;/ulgt; lt;/divgt; lt;div class="container"gt; lt;div id="intro" class="section"gt;INTROlt;/divgt; lt;div id="work-experience" class="section"gt;WORK EXPERIENCElt;/divgt; lt;div id="education" class="section"gt;EDUCATIONlt;/divgt; lt;div id="intrests" class="section"gt;INTERESTSlt;/divgt; lt;div id="refrences" class="section"gt;REFRENCESlt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; с некоторыми css, такими как
html { scroll-behavior: smooth; } .nav-bar { display: flex; list-style: none; width: 100%; background: black; color: white; } .nav-link gt; a { text-decoration: none; color: white; font-size: 1.5rem; } .section { height: 50vh; text-align: center; font-size: 3rem; } Ответ №2:
Просто сделайте ссылку или как вы обычно открываете ссылку на идентификатор div, например; если ваш код является ссылкой сверху ( lt;agt;lt;/agt; ), просто введите идентификатор в ( lt;a href="#divid"gt;lt;/agt; ) ссылку. Установите scroll-behavior в css значение scroll-behavior: smooth; для плавной прокрутки вашего тела или ссылки.