I’m working on a welcome page. I need one click to jump to the certain div and also a little scroll to jump to the next div. I’m not that good at javascript but I tried something and end up 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>
I did the click function just fine, but the Auto Scroll or a Little Scroll or whatever it called to move to the next div
when i scroll down a bit and move to the previous div
when i scroll up a bit it’s not doing good.
- Did I mess up with the animate,
$('html,body')
at the end of JS? - The logic should be = the div will be jump down when i scrolled down more or equal 40 and jump up when i scrolled up more or equal -20,
i just figured it out if i change
var a= document.getElementsByClassName(‘.IndexSection’); into
var a= document.getElementsByTagName(‘div’); it moved, and almost like i wanted to.. but why i can’t use get elements by class names?
What am I missing? It should be perfect I think. Please help
Advertisement
Answer
sorry guys, I’m such an idiot it was a typo and LoL… it’s not a big deal it work just fine now…
typo at
var a= document.getElementsByClassName('.IndexSection');
i don’t need to put a dot before IndexSection class, so i just type it with this
var a= document.getElementsByClassName('IndexSection');
all the code edited and it works fine now.. thx for u guys who respond