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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

8710閲覧

html スクロールの位置を指定する

satoshi501

総合スコア60

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/02/09 08:50

お世話になります。

webサイトを作成していて、ページを読みこんだ際に自動的に目的の位置までスクロールを進めたいと思っています。

現在作成したhtml<test.html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <script type="text/javascript"> window.onload = function () { document.getElementById( "scrollbox" ).onscroll = function(){ getTheScrollPosition( this ); }; } function getTheScrollPosition( $event ) { var $scrollTopRatio = Math.round( $event.scrollTop / ( $event.scrollHeight - $event.clientHeight ) * 100 ); document.getElementById( "scrollTopOutput" ).innerHTML = $scrollTopRatio + "%"; } </script> <div id = "scrollbox"; style="overflow-y: scroll; height:100px;"> テスト1<br> テスト2<br> テスト3<br> テスト4<br> テスト5<br> テスト6<br> テスト7<br> テスト8<br> テスト9<br> テスト10<br> テスト11<br> テスト12<br> テスト13<br> テスト14<br> テスト15<br> テスト16<br> テスト17<br> テスト18<br> テスト19<br> テスト20<br> テスト21<br> テスト22<br> テスト23<br> テスト24<br> テスト25<br> テスト26<br> テスト27<br> テスト28<br> テスト29<br> テスト30<br> </div> <p> 垂直方向にスクロールした割合:<span id="scrollTopOutput">0%</span> </p> <FORM NAME="pagedata" METHOD="POST" ACTION="test.html"> <button>ページ移動</button> </FORM>

これでbox内の垂直方向にスクロールした割合を取得しています。

これに<form>タグのボタンからページを移動した際、取得した位置を渡し、次回からも同じスクロール位置で始めたいと思います。

(このページですが、本来はsidebar.phpという名前で他のファイルの中にinclude(sidebar.php)のようにして左半分のメニューとして使用しています。
そのためこのページ内では<body>タグがありません。)

すいませんがご教授のほどよろしくお願い致します。

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

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

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

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

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

guest

回答4

0

scrollTop()を使用すればできると思いますが。

js

1$(function() { 2 $(window).scrollTop(100); 3});

投稿2017/02/09 09:07

turbgraphics200

総合スコア4267

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

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

satoshi501

2017/02/10 08:31

ありがとうございます すいませんこの関数をどう使用するかわからず 色々試してみましたが上手く動きません。 質問のソースに当てはめて動かす場合、どこに当てはめればいいか教えていただけませんか?
guest

0

このような感じですかね?

HTML

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml"> 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 6 7 <meta http-equiv="Pragma" content="no-cache"/> 8 <meta http-equiv="cache-control" content="no-cache"/> 9 <meta http-equiv="expires" content="0"/> 10 <style type="text/css"> 11 * { 12 margin: 0; 13 padding: 0; 14 } 15 16 #scrollbox { 17 overflow-y: scroll; 18 height: 100px; 19 } 20 </style> 21</head> 22<body> 23<script type="text/javascript"> 24 window.onload = function () { 25 var x = window.pageXOffset; 26 var y = window.pageYOffset; 27 document.getElementById("scrollbox").scrollTo(0, 80);//x, yで、単位はpx指定。 28 document.getElementById("scrollbox").onscroll = function () { 29 getTheScrollPosition(this); 30 }; 31 }; 32 function getTheScrollPosition($event) { 33 var $scrollTopRatio = Math.round($event.scrollTop / ( $event.scrollHeight - $event.clientHeight ) * 100); 34 document.getElementById("scrollTopOutput").innerHTML = $scrollTopRatio + "%"; 35 } 36</script> 37 38<div id="scrollbox" style="overflow-y: scroll; height:100px;"> 39 40 テスト1<br> 41 テスト2<br> 42 テスト3<br> 43 テスト4<br> 44 テスト5<br> 45 テスト6<br> 46 テスト7<br> 47 テスト8<br> 48 テスト9<br> 49 テスト10<br> 50 テスト11<br> 51 テスト12<br> 52 テスト13<br> 53 テスト14<br> 54 テスト15<br> 55 テスト16<br> 56 テスト17<br> 57 テスト18<br> 58 テスト19<br> 59 テスト20<br> 60 テスト21<br> 61 テスト22<br> 62 テスト23<br> 63 テスト24<br> 64 テスト25<br> 65 テスト26<br> 66 テスト27<br> 67 テスト28<br> 68 テスト29<br> 69 テスト30<br> 70 71</div> 72<p> 73 垂直方向にスクロールした割合:<span id="scrollTopOutput">0%</span> 74</p> 75<FORM NAME="pagedata" METHOD="POST" ACTION="test.html"> 76 <button>ページ移動</button> 77</FORM> 78</body> 79</html>

投稿2017/02/11 17:30

s8_chu

総合スコア14731

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

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

0

このページですが、本来はsidebar.phpという名前で他のファイルの中にinclude(sidebar.php)のようにして左半分のメニューとして使用しています。

そのためこのページ内では<body>タグがありません。

回答ではありませんが、include するのであれば <!DOCTYPE から meta まで不要だと思います。最終的に出力されるHTMLに DOCTYPE が複数できてしまうのでは。また、<html><head> は少なくとも閉じておかないと、それ以降のHTMLに影響する可能性があります。

投稿2017/02/11 02:38

kei344

総合スコア69364

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

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

satoshi501

2017/02/11 16:48

ありがとうございます はい、本来は上記の部分もなくしております。 今回見ていただくのにコピペで動けるようにhead部分を追加しました
kei344

2017/02/11 17:20

> コピペで動けるように だとしたらbodyも必要ですし、閉じタグが無いのは予期せぬ挙動になる可能性が高いので書かないほうが良いですよ。 質問内容に関しては、POSTをHTMLは受け取らないのでPOSTを使いたければPHPで受け取る必要があるでしょう。受け取った値を kirin311さんの回答の scrollTop: 200 の部分に使えばやりたい挙動が出来るでしょう。 単純に「次のページでも同じところまでスクロールさせて置いたら便利」というような話であれば sessionStorage に入れておいてページロード時にスクロールさせれば簡単な気もします。 【LocalStorageがおもいのほか便利すぎたのでまとめ - それマグで!】 http://takuya-1st.hatenablog.jp/entry/20110815/1313415947
guest

0

ベストアンサー

以下のURLが参考になるかと思いますがどうでしょうか?

https://teratail.com/questions/9635
http://qiita.com/yamaguchi_takashi/items/edce735e825631993a74

私自身、興味があったので実際にコード入力してみました。
※Chrome(PC)、IE11動作確認済み
⇒初めてのことなので何か不備あるかもしれません。
⇒確認の際は、ページの更新ではなくURLを指定して実行してください。
⇒ファイル名は、test.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>test.html</title> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script> $(function() { $('div#scrollbox').animate({ scrollTop: 200 //一番下を表示させる場合 //scrollTop: $(document).height() },100); }); </script> </head> <body> <div id = "scrollbox"; style="overflow-y: scroll; height:100px;"> テスト1<br> テスト2<br> テスト3<br> テスト4<br> テスト5<br> テスト6<br> テスト7<br> テスト8<br> テスト9<br> テスト10<br> テスト11<br> テスト12<br> テスト13<br> テスト14<br> テスト15<br> テスト16<br> テスト17<br> テスト18<br> テスト19<br> テスト20<br> テスト21<br> テスト22<br> テスト23<br> テスト24<br> テスト25<br> テスト26<br> テスト27<br> テスト28<br> テスト29<br> テスト30<br> </div> <FORM NAME="pagedata" METHOD="POST" ACTION="test.html"> <button>ページ移動</button> </FORM> </body> </html>

投稿2017/02/10 17:55

編集2017/02/10 18:03
kirin311

総合スコア53

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

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

satoshi501

2017/02/10 22:54

ありがとうございます 参考にさせて頂きます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問