auto scroll won't animate at $('html,body').animate
Question
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
4 answers
solution1
0 2016-04-02 20:36:10
change
var a= document.getElementsByClassName('.IndexSection');
to
var a= $('.IndexSection');
and change offsetTop to offset().top
$('html,body').animate({
scrollTop: a.eq(i).offset().top
});
The whole code would be:
(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= $('.IndexSection');
if(wd < 0) {
a.each(function(){
var t = $(this).position()[0].top;
if(t >= 40) return false;
});
}
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.eq(i).offset().top
});
});
})();
solution2
0 ACCPTED 2016-04-02 22:25:24
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
solution3
0 2016-04-03 00:34:24
Perhaps something like this:
var lastScrollPos=0, scrollDirection='down', scrollMonitor=true; $(function(){ $(".skippage").click(function() { $('html, body').animate({ scrollTop: $("#content").offset().top }, 300); }); $(window).scroll(function(){ currScrollPos = $(window).scrollTop(); scrollDirection = (currScrollPos>lastScrollPos) ? 'down' : 'up'; if (scrollDirection=='down' && scrollMonitor){ scrollDelta = currScrollPos - lastScrollPos; if (scrollDelta > 40){ scrollMonitor = false; $('html, body').animate({ scrollTop: $("#content").offset().top }, 900, function(){ scrollMonitor = true; lastScrollPos = currScrollPos; }); } }else if (scrollDirection=='up' && scrollMonitor){ scrollDelta = lastScrollPos - currScrollPos; if (scrollDelta > 40){ scrollMonitor = false; $('html, body').animate({ scrollTop: $("#welcome").offset().top }, 900, function(){ scrollMonitor = true; lastScrollPos = currScrollPos; }); } } }); //END window.scroll }); //END document.ready
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;}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <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>
solution4
0 2022-09-23 15:44:13
Scroll to the next question
return void
function auto scroll next question Selector
Don't scroll if last question of a page with explanation to show
if auto scroll next var blockpage Changing scroll to explanation
'html bodyanimate
scrollTop question Selector next offsettop 35 scroll top offset
scroll speed
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Overflow: auto on html,body breaks jQuery .animate scroll to top?
Animate Body scroll issue
difference between $('html, body').animate and $('body').animate?
SVGs change size but won't animate on scroll transition
Opacity won't animate during scroll or touchmove events on iOS device
CSS Animation of span with position right: auto to right: 0 won't animate
How to animate horizontal scroll html
Javascript Animate won't work
JQuery animate won't work
How to animate scroll position of div with overflow: auto?
Related Tags