[jquery] jQuery scrollTop은 Chrome에서 작동하지 않지만 Firefox에서는 작동합니다.

Program / 글쓴이

scrollTop맨 위로 이동하기 위해 jQuery 의 기능을 사용 했지만 이상하게도 ‘부드러운 애니메이션 스크롤’이 Safari 및 Chrome에서 작동하지 않습니다 (부드러운 애니메이션없이 스크롤).

그러나 Firefox에서는 여전히 원활하게 작동합니다. 무엇이 잘못 되었을까요?

다음은 내가 사용한 jQuery 함수입니다.

jQuery :

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});

HTML

<a id="gotop" href="#">Go Top </a>

CSS

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}

답변

사용해보십시오 $("html,body").animate({ scrollTop: 0 }, "slow");

이것은 크롬에서 나를 위해 작동합니다.

답변

CSS html요소에 다음 overflow마크 업 이 있으면 scrollTop작동하지 않습니다.

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

scrollTop스크롤 을 허용하려면 마크 업을 수정하여 요소 overflow에서 마크 업을 제거 하고 html요소에 추가하십시오 body. 

body {
    overflow-x: hidden;
    overflow-y: hidden;
}

답변

‘document’와 함께 scrollTop ()을 사용하면 두 브라우저에서 모두 작동합니다.

$(document).scrollTop();

… ‘html’또는 ‘body’대신. 그렇지 않으면 두 브라우저에서 동시에 작동하지 않습니다.

답변

나는 이것을 Chrome, Firefox 및 Safari에서 성공적으로 사용했습니다. 아직 IE에서 테스트 할 수 없었습니다.

if($(document).scrollTop() !=0){
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}

“if”문을 사용하는 이유는 사용자가 사이트 상단에서 모두 준비되었는지 확인하기 위해서입니다. 그렇다면 애니메이션을 수행하지 마십시오. 이렇게하면 화면 해상도에 대해별로 걱정할 필요가 없습니다.

내가 $(document).scrollTop대신 사용 하는 이유 . $('html,body')Chrome은 어떤 이유로 항상 0을 반환하기 때문입니다.

답변

크롬에서 스크롤하는 것과 같은 문제가 있습니다. 그래서 내 스타일 파일에서이 코드 줄을 제거 했습니다.

html{height:100%;}
body{height:100%;}

이제 스크롤로 재생할 수 있으며 작동합니다. 

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");

답변

본문을 스크롤하고 작동하는지 확인하십시오.

function getScrollableRoot() {
    var body = document.body;
    var prev = body.scrollTop;
    body.scrollTop++;
    if (body.scrollTop === prev) {
        return document.documentElement;
    } else {
        body.scrollTop--;
        return body;
    }
}


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");

$("html, body").animate두 개가 아닌 하나의 애니메이션 만 사용했기 때문에이 방법 이 더 효율적 입니다. 따라서 두 개가 아닌 하나의 콜백 만 실행됩니다.

답변

아마도 당신은 의미 top: 0

$('a#gotop').click(function() {
  $("html").animate({ top: 0 }, "slow", function() {
                                           alert('Animation complete.'); });
  //return false;
});

에서 애니메이션의 문서

.animate ( properties , [duration], [easing], [callback])
properties 애니메이션이 이동하는 CSS 속성 맵입니다.
…

또는 $(window).scrollTop()?

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() {
                                                              alert('Animation complete.'); });
  //return false;
});