自动滚动获胜't animate为$('html,body').animate
auto scroll won't animate at $('html,body').animate
我正在创建一个欢迎页面。我需要点击一下才能跳到某个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
,效果不好。
- 我把JS结尾的动画
$('html,body')
搞砸了吗 - 逻辑应该是=当我向下滚动大于等于40时div将向下跳转,当我向上滚动大于等于-20时div将向上跳转
-
我刚想好如果我换
var a=document.getElementsByClassName('.IndexSection');进入
var a=document.getElementsByTagName('div');它移动了,几乎就像我想的那样……但为什么我不能按类名使用get元素?
我错过了什么?我认为它应该是完美的。请帮助
更改
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
});
});
})();
对不起,伙计们,我真是个白痴,这是一个拼写错误,哈哈……没什么大不了的,现在工作得很好。。。
的打字错误
var a= document.getElementsByClassName('.IndexSection');
我不需要在IndexSection类之前加一个点,所以我只需要用这个键入它
var a= document.getElementsByClassName('IndexSection');
所有的代码都经过编辑,现在运行良好。。thx适用于响应的用户
也许是这样的:
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>
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
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何设置html元素填充的动画
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何编写HTML输入的JS内联
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量
- 如何使Javascript动态html表及其上的事件
- 在chrome.tabs.onCreated之后加载HTML页面
- 如何在vs2002中调试html页面
- 如何使用javascript或html下载PDF格式的填写表单
- 视频HTML没有'无法在Internet Explorer 11上工作
- 自动滚动获胜't animate为$('html,body').animate
- $(“html”).animate 不起作用
- $('html, body').animate 和 $('body').animate 之间的区别
- 如何从html外部调用jQuery函数:animate ?
- 与HTML事件属性(edge animate)中的onload方法相反
- HTML, CSS & JS Animate Multiple Progress bars
- JQuery 的 .animate() 在 HTML 页面中不起作用