自动滚动不会以$（'html，body'）动画。动画

时间：2016-04-02 20:35:08

标签： javascript jquery html css animation

我正在开展一个欢迎页面。我需要点击一下才能跳转到某个div 还有一个小卷轴跳转到下一个div。我在javascript方面不是很擅长，但是我尝试了一些东西，最后就像这样

$(".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>

我点击功能很好，但当我向下滚动一点并移动到上一个div时，自动滚动或小滚动或其他任何调用移动到下一个div我向上滚动一下它没有做好。

  1. 我是否在JS结束时弄乱了动画，$('html,body')？
  2. 逻辑应该是=当我向下滚动大于或等于40时div会跳下来当我向上滚动大于或等于-20时跳起来，

  3. 我只是想出来，如果我改变

    var a = document.getElementsByClassName（'。IndexSection'）;成

    var a = document.getElementsByTagName（'div'）;它移动了，几乎就像我想...但为什么我不能按类名使用get元素？

    4. 我错过了什么？我认为这应该是完美的。请帮忙

3 个答案:

答案 0 :(得分：0)

更改

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

到

var a= $('.IndexSection');

并将offsetTop更改为offset().top 

 $('html,body').animate({
      scrollTop: a.eq(i).offset().top
    });

整个代码将是：

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

答案 1 :(得分：0)

抱歉，伙计们，我是一个白痴，这是一个错字和LoL ......现在工作得不错，这不是什么大不了的事......

错误

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

我不需要在IndexSection类之前放一个点，所以我只需用这个

键入它 
var a= document.getElementsByClassName('IndexSection');

编辑了所有代码，现在工作正常..对于那些回复的人来说，这是很好的

答案 2 :(得分：0)

也许是这样的：

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>

相关问题
最新问题