25

現在、私はこれを使用しています：

$('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

これはChromeでは機能せず、Operaでは小さなちらつきが発生します.ブラウザはすぐに上にスクロールし、次に下に戻り、ゆっくりと上にスクロールし始めます。

これを行うより良い方法はありますか？

4

8 に答える 8

90

クリック機能から戻っtrueているため、デフォルトのブラウザーの動作 (つまり、go-to-topアンカーへの移動) を妨げることはありません。Mark が言ったように、次を使用します。

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

したがって、コードは次のようになります。

$('#go-to-top').each(function(){
    $(this).click(function(){ 
        $('html,body').animate({ scrollTop: 0 }, 'slow');
        return false; 
    });
});
于 2011-04-07T11:41:24.500 に答える
5

オペラで機能させるには、この回答が役に立ちました。

それをあなたのclick()

$(this).click(function() {
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
    }, 'slow');
});

jsfiddle のコード例。

.each()コレクションを反復処理する必要がないクリック ハンドラーを割り当てるだけの場合は、次のように簡略化できます。

$('#go-to-top').click(function(){ 
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
        }, 'slow');
});

また、id を持つ要素が複数ある場合#go-to-top、マークアップは無効になります。クラスに切り替えてみてください.go-to-top

于 2011-04-07T11:36:49.660 に答える
2

多分何かのような

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

同様にhtmlのもの。

編集 >

$('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('body').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('document').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('window').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

すべてのブラウザーをカバーする必要があります。

于 2011-04-07T11:36:07.143 に答える
1

うーん...奇妙なことに、jsFiddleを使用すると、Opera（ver 11.01）で正常に動作させることができますが、Chromeでは、上部にジャンプするだけで、希望どおりにアニメーション化されません。

必要に応じて、ここでjsFiddleを設定できます：http： //jsfiddle.net/H7RFU/

それは実際には答えではありませんが、それが少し役立つことを願っています。

私が作成したものがあなたのhtmlなどのように見えない場合は、それを更新して追加してください。

よろしくお願いします、

キリスト教徒

警告：これまでjsFiddleの保存機能を使用したことがないので、保存期間がわかりません。

于 2011-04-07T11:44:50.087 に答える
1 
$(window).animate({ scrollTop: 0 }, 'slow');

クロスブラウザで動作します

于 2013-03-01T08:30:35.420 に答える
0

私はこれを使っています、これもシンプルです

$(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(".scrool-top");
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
}), s.on("click", function(a) {
a.preventDefault(), e("body,html").animate({
scrollTop: 0
}, l)
})
})
于 2016-08-07T22:34:28.403 に答える
0

これはすべてのブラウザで機能します。URLのハッシュタグを回避するのでスクロールもスムーズ！

 $('#back-top 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;
      }
    }
  });
于 2016-01-22T05:44:54.790 に答える