【jQuery】処理を順番通り実行させる方法について

前提・実現したいこと

トップページのみの処理。
①ブラウザをリロードしたら、画面の一番上まで戻る。(アニメーションなしでトップまで戻りたい)
②一番上まで戻ったらターゲット要素の位置を取得して、指定する。
③スクロール開始でターゲット要素のtopの位置を可変させる。

上から順番に処理を実行させたい。③の部分は動いています。

発生している問題・エラーメッセージ

ブラウザをリロードしても、画面の一番上まで戻らず、ターゲット要素をそのままの位置で
取得して、指定してしまうため表示が崩れてしまう。

該当のソースコード

jQuery
1
2$(function() {
3      var target = $('.top-ttl'),//ターゲット要素
4      target02 = $('#slideMenu-box');
5       
6      if ( target.length && target02.is(":hidden")) {
7         $.when(function(){ 
8                $(window).on('load resize', function() {  //リロードしたら画面トップにまず戻る
9                $('html,body').animate({ scrollTop: 0 }, '1'); //アニメーションせずトップに戻りたい…
10            });
11       }).done(function(){
12              var top = target.offset().top, //.whenで書いた内容は実行されないが、.doneのほうが実装される
13              targetH = target.height(),
14              pos = top + targetH / 2 - 40;
15              target.css({top: pos + "px"});
16           
17              $(window).scroll(function() {
18              var value = $(this).scrollTop(); 
19              target.css('top', pos + value / -2 );
20              });
21           
22           }); 
23      }else if ( target.length && target02.is(":visible")) {
24            target.css('position', 'absolute' );
25      }
26    
27});  
28

試したこと

.whenの中に書いた内容を以下のように外に出して実行したところ、当然だが問題なく動くが、
.whenの中に書くと動かず…

$(window).on('load resize', function() { 
$('html,body').animate({ scrollTop: 0 }, '1'); 
});

補足情報（FW/ツールのバージョンなど）

jqueryのver1.11.1を読み込んで使用しています。
chrome、firefoxで確認しましたが、両方とも動きませんでした。

自己解決しました

.whenと.doneを使う場合、.Deferredと.resolveが必要とのことなので以下のように加えると望んだ動作をするようになりました。


var $defer = new $.Deferred();
  
      $.when(
        $defer
       ).done(function(){
           var target = $('.top-ttl');
          
          var top = target.offset().top, //y座標の初期値を取得
              targetH = target.height(),
              pos = top + targetH / 2 - 40;
              target.css({top: pos + "px"});
           
              $(window).scroll(function() {
              var value = $(this).scrollTop();  //スクロール値を取得
              target.css('top', pos + value / -2 ); //スクロールを遅くする
              });
           
        });  
      

        var func = function(){
                  $(window).on('load', function() {
                  $(window).scrollTop($('body').offset().top);
                  
                    return $defer.resolve();  
                 });
   
             return $defer.promise();
         };


$(function() {
    var target = $('.top-ttl'),
        target02 = $('#slideMenu-box');
    if ( target.length && target02.is(":hidden")) {//top-menuがあるときに処理
         func();
    }else if ( target.length && target02.is(":visible")) {
    target.css('position', 'absolute' );
    }     
        
});

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

回答2件

ベストアンサー

~~delayでやればいいのでは？~~
※ちょっと的はずれかもしれないので以下修正
ロード時の先頭への移動と、その後の処理を分けて指定するとか？

javascript
1<style>
2.dummy{height:999px;background-Color:yellow}
3</style>
4<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
5<script>
6$(window).on('pageshow',function() {
7  $(window).scrollTop($('body').offset().top);
8  $('html,body').animate({ scrollTop: 0 }, 0); 
9  console.log(1);
10});
11$(function() {
12  console.log(2);
13});  
14</script>
15<div class="dummy"></div>
16<div class="top-ttl">target</div>
17<div class="dummy"></div>

投稿2019/07/03 00:51

編集2019/07/03 01:08

yambejp

総合スコア114850

goligo

2019/07/03 02:47

ご確認していただき、ありがとうございます。ためしてみたのですが、うまくいきませんでした。ただ、以下の指定の仕方は助かりました！ ``` $(window).scrollTop($('body').offset().top); $('html,body').animate({ scrollTop: 0 }, 0); ``` これによって、画面をリロードして画面トップには戻らずともターゲット要素が指定の位置を取得できるようになりました。ありがとうございます。

yambejp

2019/07/03 02:49

命題のdone以降の処理の仕様がちょっとわからなかったので具体的にどう動かすイメージなのか説明してもらえると追加で回答できるかもしれません

goligo

2019/07/03 03:07 編集

なんとか問題をクリアすることができました。実現したかったことは、画面トップ中央に配置しているターゲット要素をパッララックス処理をしていて、画面途中でリッロードしても最初の座標を取得して、配置する、、、でした。最初はリロードしたら、まず画面トップに戻り、それから最初の座標を取得してパララックスさせれば良いと思っていたのですが、うまくいかず。。。ただ以下のように変更してからトップに移動せずとも最初の座標を取得できるようになったので助かりました。ありがとうございます！ ``` $(window).scrollTop($('body').offset().top); $('html,body').animate({ scrollTop: 0 }, 0); ``` 自分の実装には以下は必要なかったので削除しました。 ``` $('html,body').animate({ scrollTop: 0 }, 0); ```

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