3

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

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

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

2 件の回答 2

2

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

window.scrollTo(0,document.body.scrollHeight);
<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.sstatic.net/gRkqm.png"></img>

<h1>一番下</h1>

参照

Note: スニペット内のHTMLには @h2so5 さんのものを使わせて頂きました。ありがとうございます。

2
  • 参照の2行目、とんでもないインチキページにアクセスしました。パソコンが使えなくなります。マイクロソフトへ電話しろと書いてあります。電話したら実は匿名の電話番号で、anydeskをインストールさせてパソコンを乗っ取ろうとする魂胆みたいです。引っかかるところでした。もう終わりかと思いました。 Commented 2021年8月30日 0:42
  • @なおなお 恐らくドメインの失効等が原因で内容が変わってしまったのだと思われます。arcihve.org でアーカイブされているページにリンク先を変更しておきました。
    – cubick
    Commented 2021年8月30日 1:52
1

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

$(function(){
  var $img = $('#screenshot');
  var bottom = $img.offset().top + $img.height();
  var height = $(window).height();
  if (bottom > height)
    $(document).scrollTop(bottom - height);
});
<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.sstatic.net/gRkqm.png"></img>

<h1>一番下</h1>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。