Mirco-прыжки при использовании анимации scrollTop jquery - PullRequest
Новая
       12

Mirco-прыжки при использовании анимации scrollTop jquery

1 голос
/ 09 февраля 2012

У меня проблема с анимацией jquery scrollTop. Это микро-прыжки прямо перед анимацией. Чем тяжелее контент, тем хуже.

Я не понимаю, почему он это делает ...

Ниже приведен пример моего кода. (просто скопируйте / вставьте файл, это автономный код, у меня не получился хороший результат на 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>

Контент не такой тяжелый, поэтому трудно увидеть ошибку. Firefox облегчает просмотр и быструю прокрутку.

Я жду ваших хороших советов. :)

1 Ответ

1 голос
/ 12 февраля 2012

хорошо, проблема в следующей строке: window.location = '#page' + id; путем изменения хеш-тега страница переходит к указанному элементу, затем включается jQuery и анимируется с тем же идентификатором.Я немного попробовал, и моя окончательная версия такова: http://jsfiddle.net/h6CS4/6/ хотя это не здорово ...

попробуйте этот плагин вместо того, чтобы заново изобретать колесо: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

...