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

Question

사용자가 문서 상단 근처에있을 때마다 100px를 아래로 스크롤하려고합니다.

사용자가 문서 상단에 가까워지면 기능이 실행되지만 .scrollto 함수가 작동하지 않습니다.

나는 그것이 실제로 줄이 있는지 확인하기 위해 After and 전에 경고를 멈췄는지 확인하고 첫 번째 경고 만 꺼집니다. 여기에 코드가 있습니다.

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

나는 다른 많은 jQuery 함수를 사용하고 있기 때문에 jQuery 페이지가 올바르게 연결되어 있다는 것을 알고 있습니다. 또한 위에서 'PX'를 제거하려고 시도했지만 차이가없는 것 같습니다.

Answer 1

작동하지 않는 경우 jQuery의 스크롤 탑 방법을 사용해 보지 않겠습니까?

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

부드럽게 스크롤하려는 경우 기본 JavaScript Settimeout/SetInterval 함수를 사용하여 설정된 시간 동안 1px의 증분으로 스크롤 할 수 있습니다.

Answer 2

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

Answer 3

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

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

더 이상 Settimeout/SetInterval을 부드럽게 스크롤 할 필요가 없습니다.

Answer 4

주위에 html vs body 문제, 나는 CSS를 직접 애니메이션하지 않고 오히려 window.scrollTo(); 각 단계에서 :

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

크로스 브라우저 JavaScript를 사용하기 때문에 새로 고침 Gotchas없이 잘 작동합니다.

살펴보십시오 http://james.padolsey.com/javaScript/fun-with-jquerys-animate/ jQuery의 애니메이션 기능으로 무엇을 할 수 있는지에 대한 자세한 내용.

Answer 5

구문이 약간 잘못 된 것 같습니다 ... 800ms에서 100px를 아래로 스크롤하려는 코드를 기반으로한다고 가정합니다. 그렇다면 (Scrollto 1.4.1 사용) 작동합니다.

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

Answer 6

사실

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');
}