

こちらのサイト（<http://play-in-hell.com/>）ではページが遷移すると一番下から表示されるようになっています。  
このように指定した場所からトップページを表示させるにはどのようにしたらよいでしょうか？

私がやりたいのは、トップページに画像が貼ってありその画像の一番下の部分が必ず見えるようにしたいです。どうしてもブラウザ表示の拡大やディスプレイの解像度によって画像の一番下の部分が隠れて表示されてしまうことがあるので、隠れてしまう場合はすこしスクロールした状態で表示させれないものかと思っています。

よろしくおねがいします。


CC BY-SA 3.0
2015-06-06T02:00:37.393
11020
2021-08-30T01:51:18.320
2015-06-06T03:30:17.917
3639
8823
question
javascript jquery html css
ページを最初から指定の位置にスクロールする


スクロール自体は`scrollTop()`を使えば可能なので、画像の座標を計算してやればOKです。

[code]

    $(function(){
      var $img = $('#screenshot');
      var bottom = $img.offset().top + $img.height();
      var height = $(window).height();
      if (bottom > height)
        $(document).scrollTop(bottom - height);
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <h1>一番上</h1>
    
    <img id="screenshot" width="500" height="955" src="https://i.stack.imgur.com/gRkqm.png"></img>
    
    <h1>一番下</h1>
[/code]


CC BY-SA 3.0
2015-06-06T03:20:18.790
11026
2015-06-06T08:33:41.343
2015-06-06T08:33:41.343
556
3639
11020
answer


一番下に表示するためには以下のコードで実装できます:

[code]

    window.scrollTo(0,document.body.scrollHeight);
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <h1>一番上</h1>
    
    <img id="screenshot" width="500" height="955" src="https://i.stack.imgur.com/gRkqm.png"></img>
    
    <h1>一番下</h1>
[/code]

## 参照

  * [Scroll automatically to the bottom of the page](https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page)
  * [Javascript scroll to bottom of page](https://web.archive.org/web/20150316210758/http://www.sourcetricks.com/2010/07/javascript-scroll-to-bottom-of-page.html)
  * [Javascript: scroll to bottom of page/window](http://www.alecjacobson.com/weblog/?p=753)
  * [How to Scroll a Page With JavaScript](http://www.mediacollege.com/internet/javascript/page/scroll.html)

**Note** : スニペット内のHTMLには
[@h2so5](https://ja.stackoverflow.com/users/3639/h2so5)
さんのものを使わせて頂きました。ありがとうございます。


CC BY-SA 4.0
2015-06-06T08:30:23.903
11039
2021-08-30T01:51:18.320
2021-08-30T01:51:18.320
3060
556
11020
answer