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