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

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

버튼을 클릭하면 페이지가 맨 위로 스크롤되도록 설정했습니다.하지만 먼저 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으로 설정하는 방법입니다.

감사합니다!

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

예:

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

해당 경보 코드가 있는 곳에서는 추가 애니메이션에 추가하기 위해 더 많은 Javascript를 실행할 수 있습니다.

또한 완화를 설정하기 위한 '스윙'이 있습니다.더 많은 정보를 위해 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 또는 이름을 기준으로 원하는 요소로 스크롤:

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

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

당신은 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;})
});

당신은 이것을 꼭 봐야 합니다.

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

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

안녕하세요 여러분, 저는 비슷한 문제에 직면해 있었고 이것은 저에게 잘 작동했습니다.

jQuery(document).on('click', 'element', function() {
  let posTop = jQuery(target).offset().top;
  console.log(posTop);
  $('html, body').animate({scrollTop: posTop}, 1, function() {
    posTop = jQuery(target).offset().top;

    $('html, body').animate({scrollTop: posTop}, 'slow');
  });
});

언급URL : https://stackoverflow.com/questions/16475198/jquery-scrolltop-animation