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

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

ただいまの
回答率

90.52%

  • PHP

    23487questions

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

  • JavaScript

    19815questions

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

  • HTML

    11082questions

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

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

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 2,846

satoshi501

score 39

お世話になります。

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>タグがありません。)

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+3

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

$(function() {
    $(window).scrollTop(100);
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/10 17:31

    ありがとうございます

    すいませんこの関数をどう使用するかわからず
    色々試してみましたが上手く動きません。

    質問のソースに当てはめて動かす場合、どこに当てはめればいいか教えていただけませんか?

    キャンセル

+2

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

<!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"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #scrollbox {
            overflow-y: scroll;
            height: 100px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        var x = window.pageXOffset;
        var y = window.pageYOffset;
        document.getElementById("scrollbox").scrollTo(0, 80);//x, yで、単位はpx指定。
        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>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

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/11 07:54

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/12 01:48

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

    キャンセル

  • 2017/02/12 02:20

    > コピペで動けるように
    だとしたらbodyも必要ですし、閉じタグが無いのは予期せぬ挙動になる可能性が高いので書かないほうが良いですよ。

    質問内容に関しては、POSTをHTMLは受け取らないのでPOSTを使いたければPHPで受け取る必要があるでしょう。受け取った値を kirin311さんの回答の scrollTop: 200 の部分に使えばやりたい挙動が出来るでしょう。

    単純に「次のページでも同じところまでスクロールさせて置いたら便利」というような話であれば sessionStorage に入れておいてページロード時にスクロールさせれば簡単な気もします。

    【LocalStorageがおもいのほか便利すぎたのでまとめ - それマグで!】
    http://takuya-1st.hatenablog.jp/entry/20110815/1313415947

    キャンセル

同じタグがついた質問を見る

  • PHP

    23487questions

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

  • JavaScript

    19815questions

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

  • HTML

    11082questions

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