Currently, I am in the process of creating a welcome page where I want users to be able to navigate to specific sections with just one click, and also have a smooth scrolling effect when moving between sections. While my JavaScript skills are not exceptional, I attempted to create something that looks like this:
$(".skippage").click(function() {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 300);
});
(function() {
var delay = false;
$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
if (delay)
return;
delay = true;
setTimeout(function() {
delay = false
}, 200)
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a = document.getElementsByClassName('.IndexSection');
if (wd < 0) {
for (var i = 0; i < a.length; i++) {
var t = a[i].getClientRects()[0].top;
if (t >= 40) break;
}
} else {
for (var i = a.length - 1; i >= 0; i--) {
var t = a[i].getClientRects()[0].top;
if (t < -20) break;
}
}
$('html,body').animate({
scrollTop: a[i].offsetTop
});
});
})();html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.IndexSection {
font-size: 6em;
color: #ccc;
width: 100%;
}
div#welcome {
height: 100vh;
background: white;
text-align: center;
margin: 0;
position: relative;
}
.welcometext {
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 70%;
width: 80%;
float: none;
margin: 0 auto;
text-align: center;
position: absolute;
}
.skippage {
font-size: 12px;
color: red;
position: absolute;
bottom: 2%;
left: 50%;
transform: translate(-50%, -2%);
}
div.navigation {
background: #9C0;
font-size: 12px;
height: 10%;
}
div#content {
height: 100vh;
background: yellow;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css"> <!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="style/main.css"> <!-- custom -->
</head>
<body>
<div id="welcome" class="IndexSection row">
<div class=" welcometext">
welcome
</div>
<a href="#" class="skippage">Go Down</a>
</div>
<div id="content" class="IndexSection">
<div class="navigation">
option
</div>
Content
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="style/bootstrap/js/bootstrap.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="style/main.js"></script> <!-- custom -->
</html>While I was successful in implementing the click function, the auto-scroll feature to move to the next div based on scrolling up or down is proving challenging.
- Could there be an issue with the animate method with
$('html,body')at the end of the JavaScript code? - The intended logic should be such that the section would scroll down when the user scrolls more than or equal to 40 pixels down, and scroll up when they scroll more than or equal to -20 pixels up,
I discovered that changing
var a= document.getElementsByClassName('.IndexSection'); to
var a= document.getElementsByTagName('div'); made it work almost as I wanted.. But why can't I use getElementsByClassName?
I feel like I'm missing something crucial here. It should ideally work perfectly. Any help or guidance would be greatly appreciated.