web-dev-qa-db-ja.com

jQuery scrollTopはChromeで動作しますが、Firefoxでは動作します

トップに移動するためにjQueryでscrollTop関数を使用しましたが、奇妙なことに、Smoothで「スムーズアニメーションスクロール」が動作しなくなり、作成後にChrome（スムーズアニメーションなしでスクロール））お釣り。

ただし、Firefoxでは引き続きスムーズに動作しています。何が間違っているのでしょうか？

これが私が使用したjQuery関数です。

jQuery：

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});

HTML

<a id="gotop" href="#">Go Top </a>

CSS

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}
jqueryjquery-uijquery-selectors
78
Maju

$("html,body").animate({ scrollTop: 0 }, "slow");を使用してみてください

これはクロムで私のために動作します。

103
Aaron Harun

CSS html要素に次のoverflowマークアップがある場合、scrollTopは機能しません。

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

scrollTopをスクロールできるようにするには、マークアップを変更してoverflow要素からhtmlマークアップを削除し、body要素に追加します。

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}
55
user2971963

ScrollTop（）を 'document'とともに使用すると、両方のブラウザーで機能します。

$(document).scrollTop();

...「html」または「body」の代わりに。他の方法では、両方のブラウザーで同時に機能しません。

14
Alejandro del Río

Chrome、Firefox、およびSafariでこれを使用して成功しました。 IEでまだテストできていません。

_if($(document).scrollTop() !=0){
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}
_

「if」ステートメントの理由は、ユーザーがサイトの最上部で準備ができているかどうかを確認するためです。もしそうなら、アニメーションをしないでください。そうすれば、画面の解像度についてそれほど心配する必要はありません。

Ieの代わりに$(document).scrollTopを使用する理由。 $('html,body') is cause Chromeは何らかの理由で常に0を返します。

5
Steven

クロームでのスクロールにも同じ問題がありました。だから私は削除私のスタイルファイルからこのコード行。

html{height:100%;}
body{height:100%;}

今、私はスクロールで遊ぶことができ、それは動作します：

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");
2
RAM

本文をスクロールして、動作するかどうかを確認します。

_function getScrollableRoot() {
    var body = document.body;
    var prev = body.scrollTop;
    body.scrollTop++;
    if (body.scrollTop === prev) {
        return document.documentElement;
    } else {
        body.scrollTop--;
        return body;
    }
}


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");
_

これは、2つではなく1つのアニメーションのみを使用するため、$("html, body").animateよりも効率的です。したがって、2つではなく1つのコールバックのみが起動します。

2
NVI

多分あなたは_top: 0_を意味する

_$('a#gotop').click(function() {
  $("html").animate({ top: 0 }, "slow", function() { 
                                           alert('Animation complete.'); });
  //return false;
});
_

from animate docs

.animate（properties、[期間]、[イージング]、[コールバック]）
propertiesアニメーションが移動するCSSプロパティのマップ。
...

または$(window).scrollTop()？

_$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});
_
1
Reigel

私が使う：

var $scrollEl = $.browser.mozilla ? $('html') : $('body');

読み取り jQuery scrollTopはChromeで動作しますが、Firefoxでは動作します

1
Aamir Afridi
// if we are not already in top then see if browser needs html or body as selector
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body';

// then proper delegate using on, with following line:
$(obj).animate({ scrollTop: 0 }, "slow");

しかし、最善のアプローチは、ネイティブAPIだけを使用してビューポートにIDをスクロールすることです（とにかく一番上までスクロールするので、これは単にあなたの外側のdivになります）：

document.getElementById('wrapperIDhere').scrollIntoView(true);
1
Maar10

Html、bodyセレクタを使用してMozillaで問題なく動作する場合、問題がオーバーフローに関連している可能性が高くなります。htmlまたはbodyのオーバーフローがautoに設定されている場合、chromeうまく機能しないため、自動に設定されている場合、animateのscrollTopプロパティが機能しないため、正確な理由はわかりません！しかし、解決策はオーバーフローを省略して設定しないでください！私のためにそれを解決しました！あなたがそれを自動に設定しているなら、それを取り去ってください！

非表示に設定している場合は、「user2971963」の回答で説明されているとおりに実行します（ctrl + fで検索します）。これが役に立つことを願っています！

0
Mohamed Allal

だから私もこの問題を抱えていたので、この関数を書きました。

/***Working function for ajax loading Start*****************/
function fuweco_loadMoreContent(elmId/*element ID without #*/,ajaxLink/*php file path*/,postParameterObject/*post parameters list as JS object with properties (new Object())*/,tillElementEnd/*point of scroll when must be started loading from AJAX*/){
        var     
                contener = $("#"+elmId),
                contenerJS = document.getElementById(elmId);
        if(contener.length !== 0){
                var     
                        elmFullHeight = 
                                contener.height()+
                                parseInt(contener.css("padding-top").slice(0,-2))+
                                parseInt(contener.css("padding-bottom").slice(0,-2)),
                        SC_scrollTop = contenerJS.scrollTop,
                        SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight;
                if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){
                        $("#"+elmId).unbind("scroll");
                        $.post(ajaxLink,postParameterObject)
                         .done(function(data){
                                if(data.length != 0){
                                        $("#"+elmId).append(data);
                                        $("#"+elmId).scroll(function (){
                                                fuweco_reloaderMore(elmId,ajaxLink,postParameterObject);
                                        });
                                }
                         });
                }
        }
}
/***Working function for ajax loading End*******************/
/***Sample function Start***********************************/
function reloaderMore(elementId) {
        var
                contener = $("#"+elementId),
                contenerJS = document.getElementById(elementId)
        ;

    if(contener.length !== 0){
        var
                        elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))),
                        SC_scrollTop = contenerJS.scrollTop,
                        SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight
                ;
                if(SC_scrollTop >= SC_max_scrollHeight - 200){
                        $("#"+elementId).unbind("scroll");
                        $("#"+elementId).append('<div id="Elm1" style="margin-bottom:15px;"><h1>Was loaded</h1><p>Some text for content. Some text for content. Some text for content.  Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content.</p></div>');
                        $("#"+elementId).delay(300).scroll(function (){reloaderMore(elementId);});
                }
    }
}
/***Sample function End*************************************/
/***Sample function Use Start*******************************/
$(document).ready(function(){
        $("#t1").scrollTop(0).scroll(function (){
                reloaderMore("t1");
    });
});
/***Sample function Use End*********************************/
.reloader {
    border: solid 1px red;
    overflow: auto;
    overflow-x: hidden;
    min-height: 400px;
    max-height: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 400px;
    width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <div class="reloader" id="t1">
                <div id="Elm1" style="margin-bottom:15px;">
                        <h1>Some text for header.</h1>
                        <p>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                        </p>
                </div>
                <div id="Elm2" style="margin-bottom:15px;">
                        <h1>Some text for header.</h1>
                        <p>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                        </p>
                </div>
                <div id="Elm3" style="margin-bottom:15px;">
                        <h1>Some text for header.</h1>
                        <p>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                                Some text for content.<br>
                        </p>
                </div>            
        </div>

他のプログラマーにも役立つことを願っています。

0
Vladimir A.

この問題を解決するより良い方法は、次のような関数を使用することです。

_function scrollToTop(callback, q) {

    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, function() {
            console.log('html scroll');
            callback(q)
        });
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, function() {
            console.log('body scroll');
            callback(q)
        });
        return;
    }

    callback(q);
}
_

これは、すべてのブラウザーで機能し、FireFoxが2回スクロールアップするのを防ぎます（受け入れられた答え-$("html,body").animate({ scrollTop: 0 }, "slow");）を使用するとどうなりますか）。

0
Chuck Le Butt

Chrome、Firefox、Edgeでテストしたところ、私にとってうまくいった唯一のソリューションは、この方法でAaronのソリューションでsetTimeoutを使用することです。

setTimeout( function () {
    $('body, html').stop().animate({ scrollTop: 0 }, 100);
}, 500);

Chrome and Edge for me。ページをリロードしたとき、他のソリューションのいずれもpreviuos scrollTopをリセットしませんでした。残念ながら、Edgeにはまだ少し「フリック」があります。

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

このCSSは上へのスクロールと競合するため、これに注意してください

 html, body {
         overflow-x: hidden;        
    }
0
Ashutosh Jha