web-dev-qa-db-ja.com

jQueryクロスブラウザ「トップへスクロール」、アニメーション付き

今私はこれを使用しています：

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

chromeでは機能せず、Operaでちらつきが発生します。ブラウザはすぐに上部にスクロールしてから下部に戻り、その後ゆっくりと上部にスクロールし始めます。あるべきように。

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

javascriptjqueryscrolljquery-animatejquery-effects
18
Alex

クリック関数から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; 
    });
});
_
79
BenM

opera this answer で動作するようにするために役立ちました。

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_に切り替えてみてください

5
Mark Coleman
$(window).animate({ scrollTop: 0 }, 'slow');

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

1
user2122751

たぶん何かのような

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

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

1
Xand94

うーん... jsFiddleを使用すると、Opera（ver 11.01）で正常に動作しますが、Chromeで一番上にジャンプしますそして、あなたが望むようにそれをアニメーション化しません。

必要に応じて、jsFiddleをここで確認できます。 http://jsfiddle.net/H7RFU/

実際には答えではないが、これが少し役立つことを願っている。

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

宜しくお願いします、

キリスト教徒

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

1
Holger

私はこれを使用しています、これも簡単です

$(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)
})
})
0
Sajjad Hossain

これはすべてのブラウザで機能します。 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;
      }
    }
  });
0
Mohamed Arshath

スムーズなスクロールとスムーズなボタンという2つの方法でスムーズな解決策があります。

JavaScriptを無効にすると、ページの下部にあるアンカーtopへの単なるリンクになります。
（# as hrefはかなり不安定になる可能性があります。）

JavaScriptを有効にした場合：

  1. リンクを含むdivを非表示にします（ちらつきを防ぐため）。
  2. ウィンドウの右下の境界でdivの位置を修正します。
  3. href属性を削除し、clickハンドラーを追加してスムーズにスクロールします。 （URLとブラウザの履歴を整頓し、スクロール機能にreturnやpreventDefaultは必要ありません）
  4. スクロール位置に応じてdivをフェードイン/フェードアウトします。
    スクロール位置>ウィンドウの高さの場合のみリンクを表示します。
  5. サイズ変更時に位置を更新します。

[〜＃〜] html [〜＃〜]

<body>
    <a name="top"></a>
    ...
    <div id="scrolltotop" style="display:block;text-align:right">
        <a href="#top" title="scroll to top"><img src="scrolltotop.png" alt="scroll to top"></a>
    </div>
</body>

jQuery

function scrolltotop_display()
{
    var el=$('#scrolltotop');
    if((window.pageYOffset||document.documentElement.scrollTop)>window.innerHeight)
    { if(!el.is(':visible')) { el.stop(true, true).fadeIn(); } }
    else { if(!el.is(':animated')) { el.stop(true, true).fadeOut(); }}
}
function scrolltotop_position()
{
    var el=$('#scrolltotop');
    el.css('top', window.innerHeight-100);
    el.css('left', window.innerWidth-100);
    scrolltotop_display();
}
$(window).on('load', function(){
    $('#scrolltotop').css('display', 'none');
    $('#scrollToTop').css('position', 'fixed');
    scrolltotop_position();
    $('#scrollToTop a').removeAttr('href');
    $('#scrollToTop a').on('click', function(){$('html, body').animate({scrollTop:0}, 500);});
});
$(window).on('scroll', scrolltotop_display);
$(window).on('resize', scrolltotop_position);
0
Titus