Q&A
背景画像の縦横サイズを正確に記載されてはいかがでしょうか。
お世話になっております。
Webサイト制作につき質問させてください。
現在制作中のLPで、ロードしたらある地点までスクロールダウンしてから、ゆっくりとスクロールアップしていくという挙動を加えたいです。
HTML
1<html> 2<body> 3<div class="wrapper"> 4<div class="main"> 5</div> 6<div class="contents"> 7<p>テキストテキストテキストテキストテキストテキスト</p> 8</div> 9</div>
このようなHTMLとしていて、mainの領域には高さ1500pxくらいの画像を背景に設定し、background-sizeをcoverにしてブラウザの幅を広げても全面に見せるようにしています。
で、うまくできていないこととしては、ロードしたら背景画像（キービジュアル）のぴったり底までスクロールダウンさせることです。
Javascript
1$('html,body').animate({scrollTop: target},1,'swing',function(){ 2$('html,body').animate({scrollTop: 0},3500,'swing',function(){ 3// 処理 4}); 5});
こういうjQueryを書いていて、targetに固定の数値を指定すれば動きとしてはできるのですが、動的にtargetの値を取る方法がわかりません。ロードしてスクロールダウンしたら背景画像の一番下まで画面で見せてそれより下（上記、HTMLのcontentsの部分）は見せたくないと考えています。
お力を貸していただけたら幸いです。
targetを動的にしたいということですが、その値はどのようにして決める予定ですか？ブラウザの横幅に対する割合とか、ブラウザ高さ100とか、何かを基準にするとは思うのですが。
インデントはきちんとつけてください。
回答1件
0
ベストアンサー
targetの位置は以下のようになるはず。
js
1var target = $(".main").offset().top + $(".main").height() - $(window).height();
.mainのY座標絶対値に.mainの高さを加算。
そうすると.mainのお尻（ちょうど.contentsの頭）になる。
そこから画面サイズ分だけ戻してやれば、.mainのお尻が画面の一番下にくる。
投稿2018/07/18 00:48
総合スコア3191
あなたの回答
tips
プレビュー
