jQueryのスムーススクロールで移動する際に、画像も一緒に動かしたい

jQueryでスムーススクロールを実装しました。

画面下部にある画像をクリックすると、画面上部へスクロールするように設定しました。

次の段階として、スクロールする際に、このクリックした画像をスクロールと一緒に画面上部まで移動させたいです。

イメージとしては、このサイト→永岡書店と同じようなスムーススクロールにしたいです。

このサイトでは、画面下部へとスクロールすると、画面右下に鳥の画像が現れます。そして、この鳥をクリックすると画面上部へスクロールしながら、鳥も一緒に画面上部へと移動します。

このサイトと同じように、スムーススクロールしながら画像も一緒に移動させたいです。

画像を動かすのに、JavaScriptを使うのか、CSSのアニメーション(?)を使うのかもよく分かっていません。

具体的なコードではなくとも、画像を移動させる仕組みの解説だけでもありがたいです。

ご助言をお願いいたします。

JavaScript
1$(function(){
2    $('a[href^="#"]').click(function(){
3        var speed = 500;
4        var href= $(this).attr("href");
5        var target = $(href == "#" || href == "" ? 'html' : href);
6        var position = target.offset().top;
7        $("html, body").animate({scrollTop:position}, speed, "swing");
8        return false;
9    });
10});

HTML
1<a href="#container">
2    <img src="./images/icon_illustration.png" alt="「イラスト」のアイコン">
3</a>

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

回答2件

ベストアンサー

ソースを見たところ、以下の流れになっているようです。

ページトップへをクリック
ページトップへの移動と同時にclassを付与
付与するクラスに鳥の画像の動きを指定
ページトップまで行ったらクラスを外す（初期表示に戻る）

付与されるクラスは次の通りです。

SCSS
1  .go-top {
2    position: fixed;
3    right: 20px;
4    bottom: 20px;
5    @include cg;
6    font-size: 18px;
7    text-align: center;
8    z-index: 1900;
9    padding-top: 35px;
10    display: none;
11    img {
12      position: absolute;
13      top: 0;
14      left: 0;
15    }
16    &.checked {
17      img {
18        animation:anime1 0.5s infinite ease alternate,anime2 5s infinite linear alternate;
19      }
20      @keyframes anime1 { // 左右に揺れる横の動きを指定
21        0% { left: auto; right: 10px; }
22        100% { left: auto; right: 0; }
23      }
24
25      @keyframes anime2 { // ページの下からページ上部まで動く縦の動きを指定
26        0% { top: auto; bottom: 30px; }
27        100% { top: auto; bottom: 100vw; }
28      }
29    }