Skip to content

Commit 8fa0728

Browse files
andreituicuandreituicu
committed
Section 9 - Smooth navigation
1 parent ae23cf9 commit 8fa0728

File tree

3 files changed

+51
-15
lines changed

3 files changed

+51
-15
lines changed

‎starter/07-Omnifood-Desktop/css/general.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ html {
6969
/* Percentage of user's browser font-size sizing */
7070
font-size: 62.5%;
7171
overflow-x: hidden;
72+
/* scroll-behavior: smooth; Does NOT work on Safari. */
7273
}
7374

7475
body {

‎starter/07-Omnifood-Desktop/index.html

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@
2525

2626
<script defer src="js/script.js"></script>
2727

28+
<script
29+
defer
30+
src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
31+
></script>
32+
2833
<title>Omnifood</title>
2934
</head>
3035
<body>
@@ -34,11 +39,13 @@
3439
/></a>
3540
<nav class="main-nav">
3641
<ul class="main-nav-list">
37-
<li><a class="main-nav-link" href="#">How it works</a></li>
38-
<li><a class="main-nav-link" href="#">Meals</a></li>
39-
<li><a class="main-nav-link" href="#">Testimonials</a></li>
40-
<li><a class="main-nav-link" href="#">Pricing</a></li>
41-
<li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
42+
<li><a class="main-nav-link" href="#how">How it works</a></li>
43+
<li><a class="main-nav-link" href="#meals">Meals</a></li>
44+
<li>
45+
<a class="main-nav-link" href="#testimonials">Testimonials</a>
46+
</li>
47+
<li><a class="main-nav-link" href="#pricing">Pricing</a></li>
48+
<li><a class="main-nav-link nav-cta" href="#cta">Try for free</a></li>
4249
</ul>
4350
</nav>
4451

@@ -60,10 +67,10 @@ <h1 class="heading-primary">
6067
eat healthy again. Tailored to your personal tastes and
6168
nutritional needs.
6269
</p>
63-
<a href="#" class="btn btn--full margin-right-sm"
70+
<a href="#cta" class="btn btn--full margin-right-sm"
6471
>Start eating well</a
6572
>
66-
<a href="#" class="btn btn--outline">Learn more &rarr;</a>
73+
<a href="#how" class="btn btn--outline">Learn more &rarr;</a>
6774
<div class="delivered-meals">
6875
<div class="delivered-imgs">
6976
<img src="img/customers/customer-1.jpg" alt="Customer photo" />
@@ -106,7 +113,7 @@ <h2 class="heading-featured-in">As featured in</h2>
106113
</div>
107114
</div>
108115
</section>
109-
<section class="section-how">
116+
<section class="section-how" id="how">
110117
<div class="container">
111118
<span class="subheading">How it works</span>
112119
<h2 class="heading-secondary">
@@ -172,7 +179,7 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
172179
</div>
173180
</section>
174181

175-
<section class="section-meals">
182+
<section class="section-meals" id="meals">
176183
<div class="container center-text">
177184
<span class="subheading">Meals</span>
178185
<h2 class="heading-secondary">
@@ -288,7 +295,7 @@ <h3 class="heading-tertiary">Works with any diet:</h3>
288295
</div>
289296
</section>
290297

291-
<section class="section-testimonials">
298+
<section class="section-testimonials" id="testimonials">
292299
<div class="testimonials-container">
293300
<span class="subheading">Testimonials</span>
294301
<h2 class="heading-secondary">Once you try it, you can't go back</h2>
@@ -446,7 +453,7 @@ <h2 class="heading-secondary">Once you try it, you can't go back</h2>
446453
</div>
447454
</section>
448455

449-
<section class="section-pricing">
456+
<section class="section-pricing" id="pricing">
450457
<div class="container">
451458
<span class="subheading">Meals</span>
452459
<h2 class="heading-secondary">
@@ -557,7 +564,7 @@ <h2 class="heading-secondary">
557564
</div>
558565
</section>
559566

560-
<section class="section-cta">
567+
<section class="section-cta" id="cta">
561568
<div class="container">
562569
<div class="cta">
563570
<div class="cta-text-box">

‎starter/07-Omnifood-Desktop/js/script.js

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,42 @@
11
document.querySelector(".year").textContent = new Date().getFullYear();
2+
const headerEl = document.querySelector(".header");
23

34
document
45
.querySelector(".btn-mobile-nav")
56
.addEventListener("click", function () {
6-
const headerEl = document.querySelector(".header");
77
headerEl.classList.toggle("nav-open");
88
});
99

10+
// Smooth scrolling animation
11+
12+
const allLinks = document.querySelectorAll("a:link");
13+
allLinks.forEach((link) => {
14+
link.addEventListener("click", function (e) {
15+
e.preventDefault();
16+
const href = link.getAttribute("href");
17+
18+
if (link.classList.contains("main-nav-link")) {
19+
headerEl.classList.toggle("nav-open");
20+
}
21+
if (href === "#") {
22+
// Scroll back to top
23+
window.scrollTo({
24+
top: 0,
25+
behavior: "smooth",
26+
});
27+
28+
return;
29+
}
30+
31+
// Scroll to sections
32+
if (href.startsWith("#")) {
33+
document.querySelector(href).scrollIntoView({
34+
behavior: "smooth",
35+
});
36+
}
37+
});
38+
});
39+
1040
///////////////////////////////////////////////////////////
1141
// Fixing flexbox gap property missing in some Safari versions
1242
function checkFlexGap() {
@@ -27,8 +57,6 @@ function checkFlexGap() {
2757
}
2858
checkFlexGap();
2959

30-
// https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js
31-
3260
/*
3361
.no-flexbox-gap .main-nav-list li:not(:last-child) {
3462
margin-right: 4.8rem;

0 commit comments

Comments
 (0)