質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

740閲覧

jQueryで新しく読み込んだ場合に一番上までスクロールしてしまう

kkpps

総合スコア25

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/05/18 00:30

php

1test.php 2 3 4<?php 5 $mysql = new PDO('mysql:host=localhost;dbname=test;charset=utf8','root',''); 6 $sql = "SELECT * FROM (SELECT * FROM test ORDER BY id DESC LIMIT 20)as A ORDER BY id"; 7 $result = $mysql->prepare($sql); 8 $result->execute(); 9 ?> 10<!DOCTYPE html> 11<html lang="en" dir="ltr"> 12 <head> 13 <meta charset="utf-8"> 14 <link rel="stylesheet" href="modal1.css"> 15 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 16 <title></title> 17 </head> 18 <body> 19 20 <div class="display" id="main" style="background-color:skyblue;width:450px;height:300px;overflow:auto;margin-left:auto;margin-right:auto;"> 21 <?php while($row=$result->fetch(PDO::FETCH_ASSOC)): ?> 22 <p><?php echo $row['id'].':'.$row['name']; ?></p> 23 <?php endwhile; ?> 24 </div> 25 26 27 <script type="text/javascript"> 28 $("#main").scrollTop($(".display")[0].scrollHeight); 29 </script> 30 31 32 <script type="text/javascript"> 33 $(".display").scroll(function(){ 34 35 if($(this).scrollTop()==0){ 36 $.ajax({ 37 url:'test2.php', 38 type:'post', 39 data:{count:23} 40 }).done(function(data){ 41 $(".display").prepend(data); 42 }); 43 } 44 45 }); 46 </script> 47 </body> 48</html>

php

1test2.php 2 3<?php 4 $mysql = new PDO('mysql:host=localhost;dbname=test;charset=utf8','root',''); 5 $sql = "SELECT * FROM (SELECT * FROM test WHERE id<23 ORDER BY id DESC LIMIT 20)as A ORDER BY id"; 6 $result = $mysql->prepare($sql); 7 $result->execute(); 8 ?> 9 <?php while($row=$result->fetch(PDO::FETCH_ASSOC)): ?> 10 <p><?php echo $row['id'].':'.$row['name']; ?></p> 11<?php endwhile; ?>

jqueryで画面を一番上までスクロールした場合に新しく20件読み込んだ際に一番上までスクロールされてしまいます。
これを一番上までスクロールしないようにしたいです。

どうすればいいですか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/18 00:59

質問は編集できますし、編集すれば質問一覧の「アクティブ」に上がってくるので新たに同じ内容で質問立てる必要はないですよ。 削除依頼も通らないのでは
guest

回答1

0

なんとも言えませんが、prependの仕様では?

投稿2020/05/18 01:51

yambejp

総合スコア114981

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kkpps

2020/05/18 07:58

なるほど わかりました
kkpps

2020/05/18 08:11

これを直すにはどうすればいいですか?
yambejp

2020/05/18 08:13

やりたいことは自分の中の先頭にdomを挿入するんですよね? 前に挿入すれば後ろに下がるのが筋では?
kkpps

2020/05/18 08:24

まぁ確かいにそうですね。 ただ、LINEなどのようにトーク内容を追加で読み込みたいときに一番上までスクロールされると少し気になるので。 そもそも上記のコードだとロジックが間違っていますか?
yambejp

2020/05/18 08:28

前に挿入する必要があるのか?というのが一番ひっかかります。
kkpps

2020/05/18 08:30

では、挿入ではなく隠していたものを表示という形になるのでしょうか?
yambejp

2020/05/18 08:31

正直なにをしたいかわかりません 下からスクロールして、TOPまできたら上に挿入される? 普通は上からスクロールして、下に挿入では?
kkpps

2020/05/18 08:37 編集

そうでしたか。 1.チャットアプリの画面を表示して最新の100件のメッセージを先に表示(過去のメッセージまで取得してしまうとDBに負荷がかかるため)。 2.さらに過去のメッセージを閲覧する場合はLINEなどのように上にスクロールして行くと過去のメッセージが読み込まれて表示される。 2を実装したいです
yambejp

2020/05/18 08:53

挿入するhtmlをdivなどで囲み、その高さ分下にスクロールしてください
kkpps

2020/05/18 09:01

やはりそうなりますよね。 いろいろ聞いてくれてありがとうございます
yambejp

2020/05/18 11:44

一旦本文をフェードアウトして、opacity:0の状態で追加して、 スクロール後にフェードインすれば、違和感少なめでしょう
kkpps

2020/05/18 23:22

ありがとうございます 出来ました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問