JQuery $.scrollTo() 함수를 사용하여 창을 스크롤하는 방법

JQuery $.scrollTo() 함수를 사용하여 창을 스크롤하는 방법

저는 사용자가 문서 상단에 접근할 때마다 100px씩 스크롤을 내리려고 합니다.

사용자가 문서 상단에 가까워지면 실행하는 기능이 있는데 .scrollTo 기능이 작동하지 않습니다.

실제로 이를 중단시킨 것이 회선인지 아닌지 확인하기 위해 앞뒤로 경고를 넣었는데 첫 번째 경고만 울립니다. 코드는 다음과 같습니다.

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

저는 제가 다른 많은 jquery 기능을 계속 사용하고 있고 모두 잘 작동하기 때문에 jquery 페이지가 제대로 연결되어 있다는 것을 알고 있습니다.위에서 'px'도 제거해봤는데 별 차이가 없는 것 같습니다.

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

작동하지 않으면 jQuery의 scrollTop 방법을 사용해 보는 것이 어떻습니까?

$("#id").scrollTop($("#id").scrollTop() + 100);

원활한 스크롤을 원한다면 기본 자바스크립트 setTimeout/set을 사용할 수 있습니다.설정된 시간에 따라 1px씩 스크롤하는 간격 함수입니다.

jQuery는 이제 애니메이션 변수로 scrollTop을 지원합니다.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

시간 초과/설정을 더 이상 설정할 필요가 없습니다.부드럽게 스크롤할 간격입니다.

둘러보기html대body문제, 나는 CSS를 직접 애니메이션화하지 않고 오히려 전화를 걸어 이 문제를 해결했습니다.window.scrollTo();각 단계에서:

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

이것은 크로스 브라우저 자바스크립트를 사용하기 때문에 새로 고침 프로그램 없이도 잘 작동합니다.

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

구문을 약간 잘못 알고 있는 것 같습니다.코드를 바탕으로 800ms 내에 100px를 스크롤하려고 한다면 (스크롤To 1.4.1 사용) 다음과 같이 작동합니다.

$.scrollTo('+=100px', 800, { axis:'y' });

사실은.

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

잘 작동하고 패딩을 지원할 것입니다.또한 마진을 쉽게 지원할 수 있습니다. 완료는 아래를 참조하십시오.

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}

언급URL : https://stackoverflow.com/questions/832860/how-to-scroll-the-window-using-jquery-scrollto-function