jQuery：ページトップリンク -リンクボタンをクリックしたら形状が変化-

Question

実現したいこと↓
サイトのページトップリンクのボタンを
①ページ上部では「Scroll」の表示
②スクロールダウンしたら画像１を表示（ページトップリンクになります）
③ページトップリンクをクリックすると画像２に変化しページトップへスムーススクロール
④ページトップへ戻ると再度「Scroll」表示

現状↓
①、②、④は実現済みですが、③の画像の切り替えが実現できません。
参考サイトhttps://coco-factory.jp/ugokuweb/move01/8-1-8/

試したこと↓
html:Scrollとページトップリンクを用意。
CSS:デフォルト表示のページトップリンクと、クリック時のクラス付与したページトップリンクを用意。(画像は背景で設定しました。)
jQuery:スクロールダウン・ページトップとローカルナビのスムーススクロール、ページトップリンクをクリックしたらクラスを付与する設定を用意。

以下それぞれの該当部ソースです。

		 	<p id="scroll_down" class="flexbox">scroll<img alt="scrolldown" src ="img/scroll.png"></p>
			<p id="pagetop"><a href="#"></a></p>

	<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
	<script src="script.js"></script>

	#pagetop a {
		/*aタグの形状*/
	  display: block;
	  width: 100px;
	  height: 100px;
		/*背景画像の指定*/
	  background: url("img/pagetop.png") no-repeat center;
	  background-size: contain;
	}
	
	#pagetop.floatAnime a {
	  width: 100px;
	  height: 150px;
		/*背景画像の指定*/
	  background: url("img/pagetop-2.png") no-repeat center;
	  background-size: contain;
		/*アニメーションの指定*/
	  animation: floatAnime 2s linear infinite;
	  opacity: 0;
	}
	
	@keyframes floatAnime {
	  0% { transform: translateX(0); opacity: 0; }
	  25% { transform: translateX(-6px);opacity: 1; }
	  50% { transform: translateX(0) }
	  100% { transform: translateX(6px);opacity: 1; }
	}

// スクロールダウン・ページトップ

$(function() {
  var pagetop = $('#scroll_down');

  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 500) {
      pagetop.fadeOut(500);
    } else {
      pagetop.fadeIn();
    }
  });
});


$(function() {
  var pagetop = $('#pagetop');
  pagetop.hide();
  
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 1000) {
      pagetop.fadeIn(1000);
    } else {
      pagetop.fadeOut();
    }
  });
  
 
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }
	, 600);
    return false;
  });
});

// ローカルナビのスムーススクロール

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 700;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

// #pagetopをクリックした際の設定
$('#pagetop').click(function () {
  var scroll = $(window).scrollTop(); 
  if(scroll > 0){
    $(this).addClass('floatAnime');
        $('body,html').animate({
            scrollTop: 0
        }, 2000,function(){
            $('#pagetop').removeClass('floatAnime');
        }); 
  }
    return false;
});

説明に不足あればご指摘ください。
わかりにくいかと思いますが、どうぞよろしくお願いいたします。

Comments

[Lhankor_Mhy]

補足願います。

1. 「サイトのページトップリンク」とは #pagetop のことですか？

2. 1の通りであるならば、「（ページトップリンクになります）」とはどういう動作ですか？　何かが #pagetop になる、という解釈で合っていますか？　それは、ページトップリンクになる前はなんであったものですか？

3. 1の通りであるならば、「①ページ上部では「Scroll」の表示」「④ページトップへ戻ると再度「Scroll」表示」とは、 #pagetop のテキストを変える、という意味で合っていますか？

4. 「③ページトップリンクをクリックすると画像２に変化しページトップへスムーススクロール」とのことですが、そちらの環境では #pagetop はスクロールに追従しているのですか？　ご提示のコードではそのようになっていないようです。

[Lhankor_Mhy]

すみません、もうひとつお願いします。

5. 画像2とは pagetop-2.png のことでいいですか？

[yamahaggy]

ご質問ありがとうございます。
それぞれ補足いたします。

1. そのとおりです。

2.ページトップリンクになる前には「Scroll」という文字が表示されています。

3.そのとおりです。正確には①と④の状態ではテキスト、他の状態では画像です。

4.追従しております。

5,そのとおりです。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、スクロールに追従しませんでしたので、コードが不足しているのだろうと思います。

Answer 1

補足依頼にご応答いただけなかったので想像で回答します。

			pagetop.click(function () {
				$('body, html').animate({ scrollTop: 0 }
					, 600);
				// return false;        ←これを消す
			});
		});

		// ローカルナビのスムーススクロール

		$(function () {
			$('a[href^="#"]').click(function () {
				var speed = 700;
				var href = $(this).attr("href");
				var target = $(href == "#" || href == "" ? 'html' : href);
				var position = target.offset().top;
				$("html, body").animate({ scrollTop: position }, speed, "swing");
				// return false;        ←これを消す
			});
		});

Comments

[yamahaggy]

ご回答ありがとうございます。
補足が遅くなり申し訳ありませんでした。
試してみましたが、やはり画像は切り替わりません…。