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
イベントを発生させるボタンが常に表示されている必要がありますか?そうでなければ、私はあなたの最初の状態のために簡単にすることができるどんな種類の状態も必要としないコードを持っています
The Mechanic

1
ミリ秒前後の引用符があってはなりません。ドキュメントが参照する「文字列」は遅い/速い
mplungjan

回答:


313

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

例えば:

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

そのアラートコードがある場合は、さらにJavaScriptを実行して、アニメーションを追加できます。

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


1
Thomasさん、ありがとうございます。クラスがすぐに追加されるため、遅延も追加しました。if(top!= 0){console.log( "hidden scroll"); body.animate({scrollTop:0}、 '500'、 'swing'、function(){console.log( "Finished animating"); leftitems.delay(1000).removeClass( "slide");}); }
ファンディディエゴ

5
この投稿が4歳のためかどうかはわかりませんが、jQueryの新しいバージョンでは、タイミングの前後の一重引用符を削除する必要があると思います:body.animate({scrollTop:0}、500、 'swing'、 function(){alert( "Finished animating");});
Andrew

27
ところで、2つの要素を選択したため、コールバックは2回実行されます。
Big McLargeHuge 2014年

8
トーマスは、本文とhtmlを追加することに長所がありました。ケース1. Chromeは本体とスクロールを読み取り、それを行うにはFIrefoxがHTMLを必要とします。
ファリス

4
試してみました– $( 'html')はChromeでは機能せず、$( 'body')はFirefoxでは機能しないため、$( 'html、body')が必要です。また、.stop()を呼び出すのも良いことです。Chromeでアニメーションをすばやく数回呼び出そうとしたところ、ページを下にスクロールできませんでした。
Lev Lukomsky

54

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

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

8
$("html")代わりに使用する必要があります。あなたの場合、コールバック関数を追加すると、それは2回呼び出されます。1回はhtmlに対して、もう1回はbodyに対してです。また、bodyを使用しても何も起こりません。
欠陥

10
ブラウザに依存しているようです。$( 'html')は何もしない場合があるため、両方を使用し、2回トリガーされるコールバックに注意する必要があります。
commonpike 14

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
アンソニーウォルシュ

@AnthonyWalsh方法はありません。varグローバル変数を上書きしないようにする必要があります(その名前のグローバル変数が存在する場合)
T.Todua

十分に公平です;-) TypeScriptを使用して、timelengthのパラメーターとして数値を直接渡しているので、私の場合はすべてのローカルスコープです。乾杯!
Anthony Walsh

4

クリック機能付きのコード()

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

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

}); 

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


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

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.