jQuery .scrollTop (); + 애니메이션


171

버튼을 클릭하면 페이지가 위로 스크롤되도록 설정했습니다. 그러나 먼저 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이되면 실행되는 다른 애니메이션을 추가 할 수 있습니까?

감사!


1
이벤트를 발생시키는 버튼이 항상 표시되어야합니까? 그렇지 않다면 첫 번째 조건에서 쉽게 할 수있는 조건이 필요없는 코드가 있습니다.
Mechanic

1
밀리 초 주위에 따옴표가 없어야합니다. 은 "문자열"문서는 빠른 속도가 느린 / 있습니다을 말한다
mplungjan

답변:


313

이를 위해 스크롤 애니메이션이 완료된 후 실행될 animate 명령에 대한 콜백 함수를 설정할 수 있습니다.

예를 들면 다음과 같습니다.

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

해당 경고 코드가있는 곳에서 더 많은 애니메이션을 추가하기 위해 더 많은 자바 스크립트를 실행할 수 있습니다.

또한 '스윙'은 여유를 설정하기 위해 존재합니다. 자세한 내용은 http://api.jquery.com/animate/ 를 확인하십시오 .


1
고마워 토마스, 그게 내가 필요한거야. 수업이 너무 빨리 추가되어 지연이 추가되었습니다. if (top! = 0) {console.log ( "숨겨진 스크롤"); body.animate ({scrollTop : 0}, '500', 'swing', function () {console.log ( "완료된 애니메이션"); leftitems.delay (1000) .removeClass ( "slide");}); }
Juan Di Diego

5
이 게시물이 4 세이기 때문에 확실하지 않지만 최신 버전의 jQuery에서는 타이밍 주위에서 작은 따옴표를 제거해야한다고 생각합니다. body.animate ({scrollTop : 0}, 500, 'swing', function () {alert ( "완성 된 애니메이션");});
Andrew

27
그런데 두 요소를 선택했기 때문에 콜백이 두 번 실행됩니다.
Big McLargeHuge

8
Thomas는 body와 html을 추가하는 것이 좋습니다. 사례 1. Chrome 읽기 본문 및 스크롤, FIrefox에서 HTML을 사용해야합니다.
fearis

4
방금 시도 – Chrome에서 $ ( 'html')이 작동하지 않고 Firefox에서 $ ( 'body')가 작동하지 않으므로 $ ( 'html, body')가 필요합니다. 또한 .stop ()을 호출하는 것이 좋습니다. 크롬에서 여러 번 빠르게 애니메이션을 호출하려고 시도한 후 페이지를 아래로 스크롤 할 수 없었습니다.
Lev Lukomsky 2016 년

54

이 코드를 사용해보십시오 :

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

8
$("html")콜백 함수를 추가하면 html에 대해 한 번, body에 대해 한 번 호출되기 때문에 대신 사용해야합니다 . 그리고 몸을 사용하는 것은 아무것도하지 않습니다.
flawyte

10
브라우저에 따라 다릅니다. 어떤 경우에는 $ ( 'html')은 아무 것도 할 수 없으므로 두 가지를 모두 사용하고 콜백을 두 번 처리해야합니다.
commonpike

31

이것을 사용하십시오 :

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});

8

이를 위해 콜백 메소드를 사용할 수 있습니다

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);

7

대신 이것을 시도하십시오 :

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

5

간단한 해결책 :

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

' timelength '는 이미 매개 변수로 전달되었으므로 'var'로 선언 할 필요가 없습니다. 이 답변의 '편집'은 6 자 미만이므로 불가능했습니다! ;-) +1
Anthony Walsh

@AnthonyWalsh 전혀 방법이 없습니다. var전역 변수를 덮어 쓰지 않아도됩니다 (해당 이름의 전역 변수가있는 경우)
T.Todua

충분히 공정한 ;-) TypeScript를 사용 하고 있으며 내 경우에는 모든 로컬 범위 를 시간 길이 의 매개 변수로 직접 전달 합니다. 건배!
Anthony Walsh

4

클릭 함수가있는 코드 ()

    var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

}); 

.toTop= 클릭 된 요소의 클래스 어쩌면 imga


4
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
       alert("Finished animating");
    });

0

이걸 봐야 해

$(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

또는 시도해보십시오

$(function () {$('a').click(function () {
$('body,html').animate({
    scrollTop: 0
}, 600);
return false;});});

0
$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);

0

CSS 클래스 또는 HTML ID를 모두 사용할 수 있습니다. 대칭을 유지하기 위해 항상 CSS 클래스를 사용합니다.

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">
$(document).ready(function () {
    $('.js--scroll-to-plans').click(function () {
        $('body,html').animate({
            scrollTop: $('.js--section-plans').offset().top
        }, 1000);
        return false;})
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.