web-dev-qa-db-ja.com

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に設定する方法を教えてください。

ありがとうございます。

jqueryjquery-animatescrolltop
161
Juan Di Diego

これを行うには、スクロールアニメーションの終了後に実行されるanimateコマンドのコールバック関数を設定します。

例えば：

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

その警告コードがあるところでは、あなたはさらなるアニメーションに加えるためにもっと多くのJavaScriptを実行することができます。

また、「スイング」は緩和を設定するためにあります。詳細については http://api.jquery.com/animate/ をご覧ください。

284
Thomas Stiegler

このコードを試してください：

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

これを使って：

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

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

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

});
28
Beep

代わりにこれを試してください：

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

これにはコールバックメソッドを使うことができます

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

クリック機能付きコード（）

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

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

});

.toTop =クリックされた要素のクラスはimgまたはaです

3
Scorby

簡単な解決策：

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;
    });
}
2
T.Todua
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
Junaid