トップへ戻るボタンが完全に消えない

Question

****ページを一定スクロールすると表示されるトップへ戻るボタンを実装したいです。
fa要素で↑矢印を表示してdisplay:noneで隠し、一定量のスクロールで表示させるようにしています。

記号自体は消えるのですが、完全に消えずボタンの背景のかけらのような表示が残ってしまいます。
コンソールエラーは出ていないようです。

<div id="toPageTop"><span class="fas fa-chevron-up" id="back-to-top"></span></div>

#toPageTop{
  position: fixed;
  bottom: 80px;
  right: 25px;
  font-size: 30px;
  background:#53A2BE;
  padding: 5px 10px;
  border-radius: 50%;
  opacity: 0.9;
}

	var $top =$('#back-to-top');
	$top.css('display','none');
	$(window).scroll(function(){
	if($(this).scrollTop() > 500){
		$top.fadeIn();
	}else{
	  	$top.fadeOut();
}
});
 	$top.click(function(){
          $('body,html').animate({
            scrollTop: 0
          }, 600);
          return false;
        });

paddingが残って表示されてしまっているようです。
解決方法を教えてください。

Comments

[mutsuki22]

htmlも合わせてご提示とMarkdown機能を使って貰えると有り難いです。
https://teratail.com/help#about-template

[m.ts10806]

HTMLと現象が分かる画面キャプチャをご提示ください。
また、コードはマークダウンのcode機能を利用してご提示ください。

[azuapricot]

デベロッパーツールで見てみて、何が残っているのかわかったらそれを非表示にしてやればいいだけな気もします
再現できるコードがあれば検証できるのですが

Answer 1

#toPageTop じゃなく #back-to-top に background padding border-radius をつければよいです。

Comments

[skyneru]

解決しました！とても助かりました。
回答の仕方を教えてくれたみなさまもありがとうございます。
感謝です。