web-dev-qa-db-ja.com

jQuery scrollTop（）メソッドが機能しない

次のjQueryコードがあります

$(document).ready(function () {
    $('.navtoTop').click(function(){
           $("html").scrollTop( $("#topofthePage").offset().top );
    }); 
});

ここで、「navtoTop」はボタンのクラス（「トップに戻る」のようなもの）であり、ページの左下に固定位置があり、「topofthePage」は最上部の<div>のIDです。私のページの。

私もこれを試しました

$('.navtoTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

これがhtmlコードです

<body>
    <div id="topofthePage"></div>
    ...
    ...
    <img src="navtoTop.png" class="navtoTop">   
</body>

何が悪いのかわかりませんが、これは機能しません。誰かが良い解決策を説明してくれますか？

必要に応じて、コードの詳細を教えてください。

javascriptjqueryhtmlcssscroll
11
MD Danish Ansari

windowの代わりにhtmlを使用する必要があります：

$(window).scrollTop( $("#topofthePage").offset().top );

windowは、タグではなくオブジェクトであるため、引用符で囲まないでください。

16
taxicala

ScrollToの一般的な問題は、CSSの「html、body」要素にオーバーフローが設定されていることです。 html/body要素でスクロール/アニメーションの問題が発生する場合はめったに言及されず、過剰なエンジニアリングが必要になる可能性があります。

オーバーフローを設定する必要がある場合は、body要素のみに配置します。 htmlとbodyの両方ではありません。

また、htmlのクラスまたはIDの代わりにdata- *属性を使用するのも良い習慣です。これにより、スタイルをコードから分離する癖がつきます。将来の生活を楽にするためにこれを考慮してください：

再利用可能なスクロール機能を作成

scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        // if you need a callback function
    });
  }
}

Html要素にデータ属性を作成します（data-nameは任意であり、意味があります）。

HTMLリンクを追加

<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>

HTML要素を追加

<div data-receiver="ScrollToMatch">Scrolls To This Element</div>

CSSを検証" "html、body"に追加されたオーバーフローが機能しない

body { overflow-x: hidden; }

READYの関数の初期化"複数の呼び出しで柔軟性を生み出すために属性名セレクターを備えたドキュメントで初期化

scrollioreceiver('[data-sender]');

お役に立てれば！

5
CR Rollyson

あなたはすでにこれについて答えを得ました。ただし、スムーズなスクロールも必要なため、次の代替方法を検討してください。

$('.navtoTop').click(function(){
    $('html, body').animate({
        scrollTop: $('#topofthePage').offset().top
    }, 1000);
});
2
leo.fcx