I'm learning JavaScript, so I decided to create a one page website along the process. I want to implement smooth scrolling in the page, but it doesn't work even though the code appears clean and correct. I need help figuring out the issue.
Basically what's happening is when I click a link in the navigation bar to take me down the target page, it doesn't scroll at all or even do anything. And also, when I try to scroll it normally after I click a link, the scrolling shakes and doesn't let me keep scrolling.
I already checked the debugger for error, and there is no errors according to the debugger(at least no syntax errors).
How can I find the issue and how to solve it?
Here is the JavaScript code:
var targetDistance = 0;
var distanceScrolled = 0;
var bodyHeight = 0;
var Ydistance = 0;
var marginY = 0;
var speed = 55;
var tempDist = 24;
function smoothScroll(el) {
targetDistance = document.getElementsByClassName(el).offsetTop; //Target distance to scroll from current element
distanceScrolled = window.pageYOffset; //Distance scrolled from current element to target element
bodyHeight = document.body.offsetHeight; //Maximum distance of the body to scroll from the current element
Ydistance = distanceScrolled + window.innerHeight; //Total distance scrolled from the current element to the bottom
var setScroll = setTimeout(function(){
smoothScroll(el);
}, 1);
//Stop Scrolling when it hits bottom of the page
if (Ydistance >=bodyHeight) {
clearTimeout(setScroll);
}
//Scroll if the distance scrolled is less than the target distance
else if(distanceScrolled < targetDistance - 24) {
var distToScroll = distanceScrolled + 24;
window.scroll(0, distToScroll);
}
//stop when the distance scrolled equals or is greater than the target distance
else {
window.scroll(0, distToScroll);
}
}
if you Guys need the HTML5 code, here it is:
<!doctype html>
<html lang="en">
<head>
<title>Smooth Scrolling</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="allPages" class="Page1">
<div class="navBar">
<nav>
<ul>
<li><a href="#" onclick="smoothScroll('Page4'); return false;">Contacts</a></li>
<li><a href="#" onclick="smoothScroll('Page3'); return false;">Portfolio</a></li>
<li><a href="#" onclick="smoothScroll('Page2'); return false;">About Me</a></li>
<li><a href="#" onclick="smoothScroll('Page1'); return false;">Home</a></li>
</ul>
</nav>
</div>
</div>
<div id="allPages" class="Page2">
</div>
<div id="allPages" class="Page3">
</div>
<div id="allPages" class="Page4">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
In case you also need the CSS code, here it is:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: monospace;
font-size: 18px;
}
.body {
height: 100%;
}
.navBar {
margin-top: 2%;
}
.Page1 {
height: 100vh;
}
.Page1 ul {
list-style: none;
margin-right: 10%;
margin-left: 65%;
}
.Page1 ul a {
float: right;
text-decoration: none;
padding: 15px;
color: black;
font-weight: bold;
}
.Page1 ul a:hover {
background-color: #D91E18;
color: white;
}
.Page2 {
height: 100vh;
background-color: #DADFE1;
}
.Page3 {
height: 100vh;
background-color: #DADFE1;
}
.Page4 {
height: 100vh;
background-color: #DADFE1;
}
