最初からスクロールされた状態で画面を表示させたい

JSを用いてページにアクセスされたら初期状態で指定された場所に表示させたいのですが、どうすれば良いのでしょうか？

html
1<html lang="ja">
2<head>
3<body>
4・
5・
6・
7<!-- ページアクセス時にここから表示させたい -->
8<div id="position"></div>
9</body>
10</head>
11</html>

指定の場所にスクロールさせる記述はあるのですが、スクロールではなくてページアクセスしたときから
指定の場所を表示させる方法がわかりません。
どうすればページアクセス時にスクロールではなくて最初から指定した場所を表示させることが出来るのでしょうか？
ご教授ください、よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

javascriptでやるならこう

javacript
1window.addEventListener('DOMContentLoaded', function(e){
2  location.hash="position";
3});

CSS
1.dummy{height:800px;background-Color:yellow;}

html
1<div class="dummy">dummy</div>
2<div id="position">here!</div>
3<div class="dummy">dummy</div>

※hashを書き換えられるのが嫌だという場合はjQueryでこう

javascript
1$(function() {
2    $('html,body').animate({scrollTop:$('#position').offset().top }, 0, 'swing');
3});

投稿2017/12/22 05:20

総合スコア117674

2017/12/22 06:23

ご回答ありがとうございます。実装してみたのですが(jQueryのほう)動き的にはスクロールが一番上の状態の画面が一瞬表示されてその後に指定の位置に移動しました。出来れば一瞬もスクロールが上の状態にならないで指定した位置にぱっと表示させたいと考えています。

2017/12/22 06:41

ページのレンダリングが終わらない限りオフセット位置はきまらないのでレンダリングに遅延がある場合は理論的には難しいですね。どうしても気になるというならローディング画面を表示してごまかすくらいでしょうか

2017/12/22 06:58

そうなんですね、そう言えばアクセス時に最初から下の方にずれてるページはなくてだいたいスクロールかジャンプかさせているような気がしますが、技術的に難しいのですね。よくわかりました、ご教授ありがとうございます。ご教授頂いたjqueryを参考にさせて頂きます。

行動規範の内容に同意します

http://example.com/index.html#position
<div id="position"> idの値（アンカー）をURLの最後に#といっしょにくっつけるだけでOKかと思います。

詳しくは参考サイトを確認してみてください。
http://www.shoshinsha.com/hp/ref/html/a_name.html

投稿2017/12/22 05:02

総合スコア421

2017/12/22 06:19

ご回答ありがとうございます。動きとしては完璧なのですが、URLの最後に出来れば可能であれば何もくっつけたくないので、他に方法がないようでしたらこの方法を取りたいと思います

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

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

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

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