auto scroll won’t animate at $(‘html,body’).animate

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
    });
  });
})();

JavaScript
​x
 
$(".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;
}

JavaScript
 
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>

JavaScript
 
<!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

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');

JavaScript
 
    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');

JavaScript
 
var a= document.getElementsByClassName('IndexSection');
​

all the code edited and it works fine now.. thx for u guys who respond

Advertisement

Answer