How do I do this using vanilla js, I want it to be smooth, whenever I press on a navigation link!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="img/tigershorticon.jpg">
<link
href="https://fonts.googleapis.com/css?family=Indie+Flower|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/f75a08bf2a.js"></script>
<link rel="stylesheet" href="/css/style.css">;
<title>Tigers World</title>
</head>
<body>
<nav class="navigation">
<ul class="navigation-list">
<li class="navigation-item"><a id="homelink" class="navigation-link" href="#home">Home</a></li>
<li class="navigation-item"><a id="specieslink" class="navigation-link" href="#species">Species</a></li>
<li class="navigation-item"><a id="extinctlink" class="navigation-link" href="#extinct">Extinct</a></li>
<li class="navigation-item"><a id="placeslink" class="navigation-link" href="#places">Places</a></li>
</ul>
</nav>
<header id="home" class="header">
<h1 class="heading-title">Tigers World</h1>
<p class="heading-paragraph">We can not let the most beautiful cat go extinct, donate now and you will be able
to save not just one, but many tigers!</p>
<button class="heading-button">
Donate Now
</button>
</header>
<section class="species">
<h1 class="species-title">Species</h1>
<div id="species" class="species-cards">
<div class="species-card card-1">
<img class="species-card-picture" src="/img/sibertiger.jpg">
<h1 class="species-card-title">Siberian Tiger</h1>
<p class="species-card-text">The Siberian tiger is the largest of all subspecies but this only happened
in
captivity. As its name implies, it inhabits the region of Siberia in Russia.
</p>
</div>
<div class="species-card card-2">
<img class="species-card-picture" src="/img/malayan tiger.jpg">
<h1 class="species-card-title">Malayan Tiger</h1>
<p class="species-card-text">The Malayan tiger inhabits only the peninsula with such name. A few years
ago it
was considered part of the Indochinese tiger, but based on genetic analyses it was split into a
different species.</p>
</div>
<div class="species-card card-3">
<img class="species-card-picture" src="/img/bengaltiger.jpg">
<h1 class="species-card-title">Bengal Tiger</h1>
<p class="species-card-text">The Bengal tiger inhabits the Indian subcontinent, and it is known to live
both in
semi-desertic areas and the grasslands where it is wet and cool typical of the region.</p>
</div>
<div class="species-card card-4">
<img class="species-card-picture" src="/img/southchinatiger.jpg">
<h1 class="species-card-title">S. China Tiger</h1>
<p class="species-card-text">It is one of the smaller tigers and also one of the most threatened. It is
considered extinct in the wild as there have not been confirmed sightings in its natural habitat for
25 years.</p>
</div>
</div>
</section>
<section class="extinct">
<h1 class="extinct-title">Extinct</h1>
<div class="extinct-cards">
<div id="extinct" class="extinct-card">
<img src="/img/caspiantiger.jpg" alt="caspian tiger" class="extinct-card-picture">
<h1 class="extinct-card-title">Caspian Tiger</h1>
<p class="extinct-card-text">The Caspian Tiger was a tiger population which lived from eastern Turkey,
Mesopotamia, the Caucasus around the Caspian Sea through Central Asia to northern Afghanistan and
Xinjiang in western China</p>
</div>
<div class="extinct-card">
<img src="/img/balitiger.jpg" alt="balenese tiger" class="extinct-card-picture">
<h1 class="extinct-card-title">Balenese Tiger</h1>
<p class="extinct-card-text">The Bali Tiger was a tiger population that lived in the Indonesian island
of Bali. This population has been extinct since the 1950s.
</p>
</div>
</div>
</section>
<sectionclass="places">
<h1 class="places-title">Places</h1>
<div class="places-cards">
<div class="places-card">
<img src="/img/doorly.jpg" alt="henry doorly zoo" class="places-card-picture">
<h1 class="places-card-title">Henry Doorly Zoo</h1>
<p class="places-card-text">In 2014 this zoo was rated the best in the world by Trip Advisor based on
millions of reviews and considering the conservation, research and experience that visitors have, it
is therefore no surprise it remains at the top of the list. Omaha’s Henry Doorly Zoo is renowned
world-wide for its leadership in conservation and research and has the incredible exhibits to back
these claims up. The largest cat complex in North America, the largest indoor desert in the world,
world’s largest nocturnal exhibit and indoor swamp and one of the world’s largest indoor rainforests
are all located here at this zoo. Visitors love the tide pool touch tank where they can get up close
and personal with sea creatures and walking through the second largest free-flight aviary in the
world. Shows, feedings, education, conservation and research make this the number one zoo in the
world.</p>
</div>
<div class="places-card">
<img src="/img/Singapore-Zoo.jpg" alt="singapore zoo" class="places-card-picture">
<h1 class="places-card-title">Singapore Zoo</h1>
<p id="places" class="places-card-text">This highly visited zoo is one of the only zoos in the world to be 100% cage
free. Instead the Singapore Zoo uses a series of moats and glass to enhance both the experience for
visitors and to recreate the natural habitats of the animals. This zoo has invested in rescue and
conservation efforts to protect wildlife and the late Steve Irwin (aka the Crocodile Hunter) greatly
admired them for their work. A visit to this zoo is unlike any other in the world. It is the only
zoo in the world where you can have breakfast with a group of free-ranging orangutans in their
habitat. The lush rainforest setting that encompasses the entire zoo encourages animals such as
free-ranging kangaroos and flying foxes to interact with the public. The daily animal feedings and
shows are popular amongst visitors and promoted as learning experiences rather than entertainment
shows.</p>
</div>
</div>
</section>
<script src="/js/main.js"></script>
</body>
</html>
main.js
const home = document.getElementById("homelink");
const species = document.getElementById("specieslink");
const extinct = document.getElementById("extinctlink");
const places = document.getElementById("placeslink");
species.addEventListener("click", () => {
window.scrollTo(0, 500);
});
