1

div 要素に 50 個のデータ レコードがあり、最初に 10 個しか表示されず、残りの 40 個は表示: なしです。次にクリックすると、次のボタンが下にスクロールし、10 個の新しい div が表示されます。問題は、画面に表示できるレコードをさらに開くと、[次へ] ボタンが画面の外に出てしまうことです。したがって、最初にページをロードするとき、ページの上部から次のボタンまでの距離は、たとえば 300 px です。次に [次へ] をクリックすると、この距離は 600 になり、最終的になくなりますが、ページは [次へ] ボタンの一番下の位置までスクロールする必要があります。もう 1 つの問題は、最後に常に 10 レコードが表示されるとは限らないため、問題に対する静的メソッドが正しくないことです。したがって、これはたとえばほとんど良いです：

$("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);

しかし、最後に、レコードが 10 件未満の場合は 10 件で下にスクロールし、次のクリック (要素がない場合) だけで適切な高さで下にスクロールします。divが動いていても、常にdivの一番下までスクロールする方法はありますか? プラグインが無い方が良いです。

より多くのコードは次のとおりです。

HTML:

<body>
<div id="content">New elements appears here if there was click</div>
<div id="next-button">Next 10</div>
<div id="footer">Lot of data</div>
</body>

J:

$("#next-button").click(function() {
  //Scroll down the new results and after:
  $("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);
});
4

0 に答える 0