Проверьте мой блог Для получения дополнительной информации или GitHub Для моей бесплатной книги JavaScript, которая охватывает все новые функции от ES6 до 2019 года. Если вы хотите найти отличное место для интерактивных учебных пособий, я рекомендую Образование (Отказ от ответственности: ссылка на партнерство), где я сейчас заканчиваю, чтобы построить свой курс JavaScript.
Наличие Navbar со ссылками на разные части страницы является очень распространенной особенностью многих веб -сайтов. Возможность плавно прокручивать страницу вместо того, чтобы прыгать в желаемый раздел, может изменить ситуацию с приятным пользовательским опытом до раздражающего. В этом коротком уроке мы рассмотрим, как реализовать простой плавную прокручивающую NAVBAR на вашей веб -странице.
Результат
Задание
- Сложность: новичок
- Продолжительность: <1 час
- Инструменты: текстовый редактор по вашему выбору
- GitHub Repo: https://github.com/albertomontalesi/inspiredwebdev-tutorials
HTML
Структура страницы, которую мы создадим, очень проста: – навигационная строка с тремя ссылками – область контента с тремя разделами начинается с копирования кода ниже внутри тело тег вашего HTML -файла.
Section 1
Section 2
Section 3
Как видите, наш A Теги имеют href Это не совсем то же самое, что id целевой области. Если бы мы писали href = "section1" Нажав на ссылку, страница будет прыгать прямо к контенту, и мы не хотим этого, мы хотим, чтобы она плавно прокручивалась, поэтому мы используем аналогичное, хотя и другое именование, чтобы избежать этого автоматического поведения, которое мы планируем переопределить.
CSS
Если бы вы посмотрели на страницу прямо сейчас, вы бы увидели, что это не похоже на то, что в результате GIF. Давайте откроем наш style.css Файл и скопируйте этот код внутри.
/* basic styling to make the links bigger */
#navigation {
display: flex;
/* make the navbar alway stay on top */
position: fixed;
top: 0;
width: 100%;
background-color: white;
}
#navigation span {
flex-grow: 1;
height: 50px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
#navigation span a {
display: inline-block;
}
/* when a link is clicked, it gets highlighted */
.highlighted {
color: red;
}
/* make each section taller and give them different colors */
#content {
margin-top: 50px;
}
#content div {
height: 100vh;
/* align the text in the middle */
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-weight: bold;
}
#section1 {
background-color: lightcoral;
}
#section2 {
background-color: lightblue;
}
#section3 {
background-color: lightgreen;
}
Сам код довольно самоуверенна, вы можете посмотреть на комментарии, чтобы уточнить любые сомнения.
JavaScript
Теперь, для самой важной части учебника, давайте остановимся на секунду и подумаем о том, как достичь результата, который мы хотим. Нам нужно добавить слушателя событий к каждой из наших ссылок и подключить его к целевым разделам, добавив плавное поведение прокрутки.
document.addEventListener("DOMContentLoaded", () => {
// little hack to detect if the user is on ie 11
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
// get all the links with an ID that starts with 'sectionLink'
const listOfLinks = document.querySelectorAll("a[href^='#sectionLink");
// loop over all the links
listOfLinks.forEach(function (link) {
// listen for a click
link.addEventListener('click', () => {
// toggle highlight on and off when we click a link
listOfLinks.forEach( (link) => {
if (link.classList.contains('highlighted')) {
link.classList.remove('highlighted');
}
});
link.classList.add('highlighted');
// get the element where to scroll
let ref = link.href.split('#sectionLink');
ref = "#section" + ref[1];
// ie 11 does not support smooth scroll, so we will simply scroll
if (isIE11) {
window.scrollTo(0, document.querySelector(ref).offsetTop);
} else {
window.scroll({
behavior: 'smooth',
left: 0,
// top gets the distance from the top of the page of our target element
top: document.querySelector(ref).offsetTop
});
}
})
})
})
Вы можете видеть, что я включил небольшой трюк, чтобы заставить наш код работать на Internet Explorer 11. Несмотря на то, что это очень нишевый веб -сайт, если вы работаете над корпоративным программным обеспечением, вам, вероятно, придется иметь дело с ним в какой -то момент, поэтому я подумал, что стоит дать вам руку на это. IE11 не поддерживает плавную прокрутку, и если вы помните, в начале учебника я объяснил, почему мы использовали разные именования для A ярлык и наш дивизион Таким образом, поскольку мы «отключаем» поведение по умолчанию, здесь нам нужно вручную реализовать нашу собственную версию, чтобы нажимать кнопку, привнести пользователя в правильный раздел. Достаточно IE11, давайте посмотрим на код с ближе:
listOfLinks.forEach(function (link) {
// listen for a click
link.addEventListener('click', () => {
// toggle highlight on and off when we click a link
listOfLinks.forEach( (link) => {
if (link.classList.contains('highlighted')) {
link.classList.remove('highlighted');
}
});
link.classList.add('highlighted');
Сначала мы принимаем все наши A Теги, которую мы использовали в навигации, и мы переключаем класс CSS, чтобы стилизовать их по -разному при щелчке.
let ref = link.href.split('#sectionLink');
ref = "#section" + ref[1];
// ie 11 does not support smooth scroll, so we will simply scroll
if (isIE11) {
window.scrollTo(0, document.querySelector(ref).offsetTop);
} else {
window.scroll({
behavior: 'smooth',
left: 0,
// top gets the distance from the top of the page of our target element
top: document.querySelector(ref).offsetTop
});
}
Далее мы храним в ref Переменная Количество ссылки, которая была нажата, и мы строим целевой раздел с ref + ref [1]; После этого это просто вопрос создания действия прокрутки путем добавления поведения и координат нашего раздела. Идеальный ! Теперь вы знаете, как создать плавную навигацию по прокрутке на вашем сайте.
Идите вперед и реализуйте его и не стесняйтесь поделиться здесь ссылкой на вашу попытку/проект.
Большое спасибо за чтение. Следуй за мной на Devto или в моем блоге в InspiredWebdev для большего.
Получите мою электронную книгу Амазонка и Леанпуб
Оригинал: “https://dev.to/albertomontalesi/tutorial-smooth-scrolling-page-navigation-with-css-js-57j5”