Fatal编程技术网
  • javascript/
  • Javascript Mirco在使用scrollTop jquery动画时跳转

Javascript Mirco在使用scrollTop jquery动画时跳转

javascript jquery html

Javascript Mirco在使用scrollTop jquery动画时跳转,javascript,jquery,html,mousewheel,scrolltop,Javascript,Jquery,Html,Mousewheel,Scrolltop,我对scrollTop jquery动画有问题。 它会在动画之前进行微跳。内容物越重，质量越差 我不明白为什么会这样 下面是我的代码示例。（只是在文件上复制/粘贴，这是一个独立的代码，我在JSFIDLE上没有很好的结果） html，正文{高度：100%；宽度：100%}正文{宽度：100%；高度：100%}节{显示：块；宽度：896px；边距：0自动；填充：0 48px}文章{内容：''；位置：相对；显示：块；顶部：0；宽度：100%；高度：500px；填充：20%0}重影页{高度：30px；

我对scrollTop jquery动画有问题。 它会在动画之前进行微跳。内容物越重，质量越差

我不明白为什么会这样

下面是我的代码示例。（只是在文件上复制/粘贴，这是一个独立的代码，我在JSFIDLE上没有很好的结果）


html，正文{高度：100%；宽度：100%}正文{宽度：100%；高度：100%}节{显示：块；宽度：896px；边距：0自动；填充：0 48px}文章{内容：''；位置：相对；显示：块；顶部：0；宽度：100%；高度：500px；填充：20%0}重影页{高度：30px；填充：0}节{文本对齐：中心；宽度：100%；高度：100%}PageDiv1背景颜色：红色}2背景色：A522A}page4 div{背景色：背景色：背景色：蓝：蓝：{背景色：蓝：{背景色：蓝：{背景色：蓝：{背景色：蓝：{背景色：蓝：{背景色：蓝：{背景色：蓝：蓝：{背景色：蓝：蓝：蓝：{背景色：蓝：蓝：蓝：{背景色：蓝：蓝：蓝：{背景色：蓝：蓝：蓝：蓝：}背景色：蓝：蓝：}网页5}网页5.5 div}背景色：蓝：}网页5 div（背景色：背景色：蓝：蓝：蓝：{5}背景色：蓝：蓝：蓝：蓝：{5}网页5}背景色：蓝：蓝：}背景色：背景色：蓝：蓝：蓝：蓝：蓝：蓝：：：：：：}背景色：蓝：蓝：}5 div}
第1页
第2页
第3页
第4页
第5页
第6页
第7页
第8页
/*
**
**滑动
**
*/
函数goToByScroll（id）{
无功转速=1200；
var offset=$（'#page'+id）.offset（）；
如果（偏移）{
$（'body'）.stop（）.animate（{scrollTop:offset.top}，{duration:speed，queue:false}）；
window.location='#page'+id；
}
}
/*
**
**获取当前页面id
**
*/
函数getPageId（）{
var url=document.location.toString（）；
if（url.match（'#'））{
var anchor=url.split（“#”）[1]；
var anchorId=parseInt（anchor.split（'page'）[1]）；
如果（！isNaN（anchorId））
回锚；
}
返回1；
}
/*
**
**鼠标轮搬运
**
*/
函数句柄（增量）{
如果（增量>0）
goToByScroll（getPageId（）-1）；
else if（delta<0）
goToByScroll（getPageId（）+1）；
}
功能控制盘（事件）{
event.preventDefault（）；
event.stopPropagation（）；
var-delta=0；
if（事件轮三角洲）
delta=event.wheeldta/120；
else if（事件详细信息）
delta=-event.detail/3；
if（增量）
手柄（三角形）；
}
if（window.addEventListener）
window.addEventListener（'DOMMouseScroll'，wheel，false）；
window.onmouseheel=document.onmouseheel=wheel；
/*淡出*/
$（文档）.ready（函数（）{
$（'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'）；}）；
});
内容没有那么重，所以很难看到bug。Firefox使它更容易看到，并且可以快速滚动

我在等你的好建议。：）好的，问题是这行：
window.location='#page'+id；
通过更改散列标记，页面跳转到指定的元素，然后jQuery启动并动画显示到相同的ID。我尝试了一下，我的最终版本如下： 虽然不是很好

试试这个插件，而不是重新发明轮子：

好的，问题是这行：
window.location='#page'+id；
通过更改散列标记，页面跳转到指定的元素，然后jQuery启动并动画显示到相同的ID。我尝试了一下，我的最终版本如下： 虽然不是很好

尝试这个插件，而不是重新发明轮子：

请提供其他信息：你测试了哪些操作系统/浏览器？它们都测试过吗？在Windows7上用Chrome和Firefox进行了测试。（都是最新版本）我也在iPad1和iPad2上进行了测试。（相同的错误…）当使用我发布的lite wieght内容滚动时，它会快速闪烁。Chrome的优化使其更易于查看。^^我将代码复制到了JSFIDLE:-老实说，看起来有点滑稽^^这里是指向iFrame内容的直接链接：这对我来说滚动不平稳。xD我的电脑似乎对JSFIDLE一点都不舒服。请rovide附加信息：你在什么操作系统/浏览器上测试过？所有的操作系统/浏览器都测试过吗？在Windows7上测试过Chrome和Firefox。（都是最新版本）我也在iPad1和iPad2上测试过。（相同的错误…）在我发布的lite wieght内容中滚动时，它会快速闪烁。Chrome的优化让它更容易看到。^^我将代码复制到了JSFIDLE:-说实话，看起来有点滑稽^^这里是iFramed内容的直接链接：这对我来说滚动不平稳。xD我的电脑似乎对JSFIDLE一点都不舒服。你是e是的，我很愚蠢…非常感谢！我最终使用了一个（脏的）全局变量，在滚动后更新。我更喜欢在可能的情况下重新发明轮子。（我必须使用太多重的插件）你完全正确，我很愚蠢…非常感谢！我最终使用了一个（脏的）我在滚动后更新的全局变量。我更喜欢在可能的情况下重新发明轮子。（我必须使用太多沉重的插件） 
<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>