Ответы Mail
Программирование
Android
C/C++
C#
iOS
Java
JavaScript
jQuery
SQL
Perl
PHP
Python
Веб-дизайн
Верстка, CSS, HTML, SVG
Системное администрирование
Другие языки и технологии
Лидеры категории
Лена-пена
М.И.
Y.Nine
•••
Искусственный Интеллект
Искусственный Интеллект
Искусственный Интеллект
Навигация по сайту html/css/js
Владислав Федоров
(106),
закрыт
18 часов назад
Ребята хелп. Мне нужно сделать панель навигации по сайту, то есть нажал кнопку "о нас" и сайт пролистнулся сам к нужному блоку 'о нас'.
Лучший ответ
Андрей
(460615)
1 месяц назад
Пролистнуться к нужному месту на странице - это "якорь":
https://webref.ru/course/html-tutorial/anchor
Стандартный механизм HTML.
https://webref.ru/course/html-tutorial/anchor
Стандартный механизм HTML.
АлександрИскусственный Интеллект (301506)
1 месяц назад
так ему наверное нужно чтоб панель навигации оставалась видимой... чтоб только контент "пролистывался"...
Андрей
Высший разум
(460615)
Александр, Если ему нужна неподвижная панель навигации (редкостная гадость, уменьшающая полезную высоту окна), то CSS, position: fixed или sticky. https://webref.ru/css/position
Остальные ответы
Чупапи 228
(1303)
1 месяц назад
В HTML файле нужно сделать ссылку на нужный блок через # не помню точно как
Андрей Панарин
(249093)
1 месяц назад
<a href="#onas">О нас</a>
...
<h2><a id="onas">О нас</a></h2> Вот вам ссылка и якорь.
АндрейВысший разум (460615)
1 месяц назад
Только не name, а id: от name для якоря отказались много лет назад.
На htmlbook.ru ещё name, а на webref.ru уже id.
На htmlbook.ru ещё name, а на webref.ru уже id.
Андрей Панарин
Искусственный Интеллект
(249093)
Хорошо, исправил, спасибо.
Валентин Артамонов
(592)
1 месяц назад
Смотри! Поставь лайк если помог
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Навигация по сайту</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
<section id="home">
<h1>Главная</h1>
<p>Это главная страница.</p>
</section>
<section id="about">
<h1>О нас</h1>
<p>Это информация о нас.</p>
</section>
<section id="services">
<h1>Услуги</h1>
<p>Это информация о наших услугах.</p>
</section>
<section id="contact">
<h1>Контакты</h1>
<p>Это информация о контактах.</p>
</section>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html> <html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Навигация по сайту</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
<section id="home">
<h1>Главная</h1>
<p>Это главная страница.</p>
</section>
<section id="about">
<h1>О нас</h1>
<p>Это информация о нас.</p>
</section>
<section id="services">
<h1>Услуги</h1>
<p>Это информация о наших услугах.</p>
</section>
<section id="contact">
<h1>Контакты</h1>
<p>Это информация о контактах.</p>
</section>
<script src="script.js"></script>
</body>
</html>
Валентин АртамоновПрофи (592)
1 месяц назад
document.querySelectorAll('nav a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
js скрипт
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
js скрипт
Валентин Артамонов
Профи
(592)
css
V̲i̲s̲t̲a̲s̲t̲e̲r̲
(263718)
1 месяц назад
Пример навигации (динамическая подлинковка из кэша) через внутренний роутер в одностраничном приложении:
https://local-disc.firebaseapp.com/menu/#/
Для более мелких проектов вполне подойдет управление видимостью блоков, а не дремучие якоря. Загружается сразу вся стопка блоков и через меню нужный блок вытаскивается на поверхность.
Еще способ — прятать под кат. Пример:
https://local-disc.firebaseapp.com/menu/articles/programming-quotes.html
https://local-disc.firebaseapp.com/menu/#/
Для более мелких проектов вполне подойдет управление видимостью блоков, а не дремучие якоря. Загружается сразу вся стопка блоков и через меню нужный блок вытаскивается на поверхность.
Еще способ — прятать под кат. Пример:
https://local-disc.firebaseapp.com/menu/articles/programming-quotes.html
Похожие вопросы