Mirco在使用scrollTop jquery动画时跳转
Mirco-jumps when using scrollTop jquery animation
我对scrollTop jquery动画有问题。它会在动画之前进行微跳跃。含量越重,情况就越糟。
我不明白为什么它会那样。。。
下面是我的代码示例。(只是复制/粘贴到文件上,这是一个独立的代码,我在jsfiddle上没有好的结果)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<style>
html,body{height:100%;width:100%}body{width:100%;height:100%}section{display:block;width:896px;margin:0 auto;padding:0 48px}article{content:' ';position:relative;display:block;top:0;width:100%;height:500px;padding:20% 0}#ghostPage{height:30px;padding:0}section div{text-align:center;width:100%;height:100%}#page1 div{background-color:red}#page2 div{background-color:blue}#page3 div{background-color:#A52A2A}#page4 div{background-color:green}#page5 div{background-color:#FF0}#page6 div{background-color:#000}#page7 div{background-color:orange}#page8 div{background-color:purple}#page_loader{text-align:center;position:fixed;top:0;left:0;background-color:white;width:100%;height:100%;z-index:9999}
</style>
<section class="clearfix">
<div id="page_loader" class="loader1"></div>
<article id="page1">
<div>Page1</div>
</article>
<article id="page2">
<div>Page2</div>
</article>
<article id="page3">
<div>Page3</div>
</article>
<article id="page4">
<div>Page4</div>
</article>
<article id="page5">
<div>Page5</div>
</article>
<article id="page6">
<div style="color: white">Page6</div>
</article>
<article id="page7">
<div>Page7</div>
</article>
<article id="page8">
<div>Page8</div>
</article>
<article id="ghostPage"></article>
</section>
</body>
<script type="text/javascript">
/*
**
** Sliding
**
*/
function goToByScroll(id) {
var speed = 1200;
var offset = $('#page'+id).offset();
if (offset) {
$('body').stop().animate({scrollTop: offset.top},{duration: speed, queue: false});
window.location = '#page'+id;
}
}
/*
**
** Get current page id
**
*/
function getPageId() {
var url = document.location.toString();
if (url.match('#')) {
var anchor = url.split('#')[1];
var anchorId = parseInt(anchor.split('page')[1]);
if (!isNaN(anchorId))
return anchorId;
}
return 1;
}
/*
**
** MouseWheel handling
**
*/
function handle(delta) {
if (delta > 0)
goToByScroll(getPageId() - 1);
else if (delta < 0)
goToByScroll(getPageId() + 1);
}
function wheel(event){
event.preventDefault();
event.stopPropagation();
var delta = 0;
if (event.wheelDelta)
delta = event.wheelDelta/120;
else if (event.detail)
delta = -event.detail/3;
if (delta)
handle(delta);
}
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
/*fades le loader mask out*/
$(document).ready(function() {
$('#page_loader').css('background-image', 'none');
$('#page_loader').css('background-color', 'rgba(255, 255, 255, 0)').animate('slow', function(){$('#page_loader').css('z-index', '-9999');});
});
</script>
</html>
内容没有那么重,所以很难看到bug。Firefox使其更易于查看和快速滚动。
我在等你的好建议
好的,问题是这一行:window.location = '#page' + id;
通过更改hash标记,页面跳转到指定的元素,然后jQuery启动并动画化为相同的ID。我试了一下,我的最终版本是这样的:http://jsfiddle.net/h6CS4/6/虽然不太好。。。
试试这个插件,而不是重新发明轮子:http://flesler.blogspot.com/2007/10/jqueryscrollto.html
相关文章:
- 如何简化动画jQuery代码
- 如何禁用可排序动画 Jquery
- 离开页面前的动画JQuery
- 动画Jquery弹出菜单
- 设置元素动画jquery
- 如何自动动画jquery画廊
- 缩放/动画 jQuery 拖放到可拖放时可拖动
- 卡片动画Jquery和CSS
- 拆分襟翼文本动画 Jquery
- 满足条件时禁用动画 jQuery
- 传递参数以动画 jquery 函数
- 延迟和动画 jQuery
- 获取动画 jQuery Java 脚本中行进的像素数
- 重新启动动画jquery和javascript
- 为什么这个脚本在页面加载后3秒没有动画(jquery)
- 菜单图标动画jQuery
- 制作无限动画jQuery
- 将延迟应用于动画jquery
- 添加滑动回调动画Jquery
- 使用动画 jquery 更改文本