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

사용자가 문서 상단에 가까워 질 때마다 100px 아래로 스크롤하려고합니다.

사용자가 문서의 맨 위에 가까워지면 실행되는 함수가 있지만 .scrollTo 함수가 작동하지 않습니다.

나는 그것이 실제로 라인인지 아닌지 확인하기 위해 전후에 경고를 두었고 첫 번째 경고 만 울립니다. 여기에 코드가 있습니다.

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

나는 전체적으로 다른 많은 jquery 함수를 사용하고 있기 때문에 jquery 페이지가 제대로 연결되어 있다는 것을 알고 있으며 모두 잘 작동합니다. 또한 위에서 'px'를 제거하려고 시도했지만 차이가없는 것 같습니다.

작동하지 않는 경우 jQuery의 scrollTop 메서드를 사용해 보지 않겠습니까?

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

원활하게 스크롤하려면 기본 javascript setTimeout / setInterval 함수를 사용하여 설정된 시간 동안 1px 씩 스크롤되도록 할 수 있습니다.

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

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

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

더 이상 원활하게 스크롤하기 위해 setTimeout / setInterval이 필요하지 않습니다.

htmlvs body문제를 해결 하기 위해 CSS를 직접 애니메이션하지 않고 window.scrollTo();각 단계를 호출하여이 문제를 해결했습니다 .

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

브라우저 간 JavaScript를 사용하므로 새로 고침 문제없이 잘 작동합니다.

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

구문이 약간 잘못 된 것 같습니다 ... 귀하의 코드를 기반으로 800ms에서 100px 아래로 스크롤하려고한다고 가정합니다. 그러면 이것이 작동합니다 (scrollTo 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');
}