jQuery로 scrollTop을 애니메이션 할 수 있습니까?

jQuery로 scrollTop을 애니메이션 할 수 있습니까?

부드럽게 아래로 스크롤하고 싶다.특히 jQuery가 이미 함수를 가지고 있는 경우에는 함수를 쓸 필요가 없습니다.

를 사용하면 됩니다.scrollTop다음과 같이 합니다.

$("html, body").animate({ scrollTop: "300px" });

닉의 대답은 훌륭하다.2개의 셀렉터(html 및 body)가 선언되어 있기 때문에 animate() 호출 내에서 complete() 함수를 지정할 때는 주의하십시오.

$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);

이중 콜백을 피할 수 있는 방법은 다음과 같습니다.

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

Nick의 답변은 훌륭하고 기본 설정도 좋지만 모든 옵션 설정을 완료하면 스크롤을 보다 완벽하게 제어할 수 있습니다.

API에서는 다음과 같이 표시됩니다.

.animate( properties [, duration] [, easing] [, complete] )

이렇게 할 수 있습니다.

.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

다음은 jQuery .animate 함수 API 페이지입니다.http://api.jquery.com/animate/

Kita가 언급한 것처럼, 'html'과 'body' 모두에서 애니메이션을 실행하면 여러 개의 콜백이 발생하는 문제가 있습니다.애니메이션과 후속 콜백을 모두 차단하는 대신 기본적인 기능 검출을 사용하여 단일 객체의 scrollTop 속성만 애니메이션화하는 것이 좋습니다.

이 다른 스레드에 대해 승인된 답변을 통해 애니메이션을 수행해야 하는 객체의 scrollTop 속성에 대한 통찰력을 얻을 수 있습니다. IE8의 pageYOffset Scrolling and Animation

// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

갱신 - - -

위의 기능 검출 시도가 실패합니다.웹킷 타입의 브라우저 페이지에는 한 줄의 방법이 없는 것 같습니다.YOffset 속성은 doctpe가 있을 때 항상 0을 반환합니다.대신 애니메이션이 실행될 때마다 단일 콜백을 하겠다고 약속하는 방법을 찾았습니다.

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

은 가가 the the the 보다 낫습니다.$('html, body')

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★$('html, body'),, 그?가로?? is ?$(window).scrollTop()애니메이션이 진행되는 동안 값이 여기저기서 뛰거나 때로는 수백 픽셀씩 뛰는 것을 볼 수 있습니다(비록 그런 일은 보이지 않습니다).자동 스크롤 중에 사용자가 스크롤 바를 잡거나 마우스 휠을 돌리면 애니메이션을 취소할 수 있는 값이 필요했습니다.

다음은 스크롤을 부드럽게 애니메이션화하는 기능입니다.

function animateScrollTop(target, duration) {
    duration = duration || 16;
    var scrollTopProxy = { value: $(window).scrollTop() };
    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target }, 
            { duration: duration, step: function (stepValue) {
                var rounded = Math.round(stepValue);
                $(window).scrollTop(rounded);
            }
        });
    }
}

다음은 사용자 상호 작용 시 애니메이션을 취소하고 목표값에 도달할 때까지 리필하는 보다 복잡한 버전입니다.이 버전은 스크롤 탑을 즉시 설정하려고 할 때 유용합니다(예를 들어 단순히 호출하는 경우 유용합니다.$(window).scrollTop(1000)- 제 경험상, 이 방법은 50% 정도 작동하지 않습니다.)

function animateScrollTop(target, duration) {
    duration = duration || 16;

    var $window = $(window);
    var scrollTopProxy = { value: $window.scrollTop() };
    var expectedScrollTop = scrollTopProxy.value;

    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target },
            {
                duration: duration,

                step: function (stepValue) {
                    var roundedValue = Math.round(stepValue);
                    if ($window.scrollTop() !== expectedScrollTop) {
                        // The user has tried to scroll the page
                        $(scrollTopProxy).stop();
                    }
                    $window.scrollTop(roundedValue);
                    expectedScrollTop = roundedValue;
                },

                complete: function () {
                    if ($window.scrollTop() != target) {
                        setTimeout(function () {
                            animateScrollTop(target);
                        }, 16);
                    }
                }
            }
        );
    }
}

다른 예에서는 페이지를 새로 고친 후 항상 페이지 맨 위에서 애니메이션이 시작되는 문제가 있었습니다.

css에 직접 애니메이션을 하지 않고 전화로 수정했습니다.window.scrollTo();각 단계:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

이것은 또한,html대body크로스 브라우저 JavaScript를 사용할 때 문제가 발생합니다.

jQuery의 애니메이션 기능으로 수행할 수 있는 작업에 대한 자세한 내용은 http://james.padolsey.com/javascript/fun-with-jquerys-animate/을 참조하십시오.

jQuery 애니메이션을 사용하여 특정 기간을 스크롤할 수 있습니다.

$("html, body").animate({scrollTop: "1024px"}, 5000);

여기서 1024px는 스크롤 오프셋이고 5000은 밀리초 단위의 애니메이션 지속 시간입니다.

scrollTo 플러그인을 사용해 보십시오.

$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $("html, body").animate({scrollTop:"0"},600);
});

페이지 끝에서 아래로 이동하려면(아래로 스크롤할 필요가 없습니다) 다음을 사용할 수 있습니다.

$('body').animate({ scrollTop: $(document).height() });

그러나 스크롤 중에 애니메이션을 추가하고 싶다면 현재 30개 이상의 쉬운 스타일을 지원하는 간단한 플러그인(Animate Scroll)을 사용해 보십시오.

크로스 브라우저 코드는 다음과 같습니다.

$(window).scrollTop(300); 

애니메이션은 없지만 어디에서나 작동한다.

언급URL : https://stackoverflow.com/questions/4034659/is-it-possible-to-animate-scrolltop-with-jquery