버튼을 클릭하면 페이지가 위로 스크롤되도록 설정했습니다. 그러나 먼저 if 문을 사용하여 페이지 상단이 0으로 설정되어 있지 않은지 확인했습니다. 그런 다음 0이 아닌 경우 페이지를 애니메이션하여 상단으로 스크롤합니다.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
까다로운 부분은 이제 페이지가 맨 위로 스크롤 된 후에 무언가를 애니메이션으로 만드는 것입니다. 그래서 다음 생각은 페이지 위치가 무엇인지 알아 내십시오. 그래서 콘솔 로그를 사용하여 알아 냈습니다.
console.log(top); // the result was 365
이것은 나에게 365의 결과를 주었다. 나는 그것이 맨 위로 스크롤하기 직전의 위치 번호라고 추측하고있다.
내 질문은 위치를 0으로 설정하여 페이지가 0이되면 실행되는 다른 애니메이션을 추가 할 수 있습니까?
감사!
답변
이를 위해 스크롤 애니메이션이 완료된 후 실행될 animate 명령에 대한 콜백 함수를 설정할 수 있습니다.
예를 들면 다음과 같습니다.
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
해당 경고 코드가있는 곳에서 더 많은 애니메이션을 추가하기 위해 더 많은 자바 스크립트를 실행할 수 있습니다.
또한 ‘스윙’은 여유를 설정하기 위해 존재합니다. 자세한 내용은 http://api.jquery.com/animate/ 를 확인하십시오 .
답변
이 코드를 사용해보십시오 :
$('.Classname').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
답변
이것을 사용하십시오 :
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
}
});
답변
이를 위해 콜백 메소드를 사용할 수 있습니다
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);
답변
대신 이것을 시도하십시오 :
var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop :0}, 500,function(){
//DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
alert('Hello');
});
}
답변
간단한 해결책 :
ID 또는 NAME을 사용하여 요소로 스크롤 :
SmoothScrollTo("#elementId", 1000);
암호:
function SmoothScrollTo(id_or_Name, timelength){
var timelength = timelength || 1000;
$('html, body').animate({
scrollTop: $(id_or_Name).offset().top-70
}, timelength, function(){
window.location.hash = id_or_Name;
});
}
답변
클릭 함수가있는 코드 ()
var body = $('html, body');
$('.toTop').click(function(e){
e.preventDefault();
body.animate({scrollTop:0}, 500, 'swing');
});
.toTop
= 클릭 된 요소의 클래스 어쩌면 img
나a