html topへ戻るボタン

Question

jQueryを使ってtopへ戻るボタンを作っているのですが、正しく表示されません

コード
head内に
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
	$(function(){
    	// 「ページトップへ戻るボタン」の要素を隠します
    	$('#pagetop').hide();
    	// スクロールした場合のアクションが記されています
    	$(window).scroll(function(){
        	// スクロール位置が200pxを超えた場合に「ページトップへ戻るボタン」をフェードインで出現させる
        	if ($(this).scrollTop() &gt; 200) {
            	$('#pagetop').fadeIn();
        	}
        	// スクロール位置が200px以下の場合は「ページトップへ戻るボタン」を消しておく（フェードアウトで消える）
        	else {
            	$('#pagetop').fadeOut();
        	}
    	});
    	// 「ページトップへ戻るボタン」をクリックした場合のページトップへ戻るスピードの速さが記されています
    	$('#pagetop').click(function(){
        	$('html,body').animate({
            	scrollTop: 0 }, 500);
        	return false;
    	});
	});
</script>
html内に
<p id="pagetop"><a href="#container"><img src="images/img_pagetop.png" height="70" width="70" alt="ページトップボタン"></a></p>
css内に
#pagetop {
    position: fixed;
    bottom: 50px;
    right: 30px;
}

と記述しています。
ブラウザで確認すると、画像が右下に切れた状態で表示され、クリックしても反応しません。
対処法を教えてください。

Comments

[m.ts10806]

70の画像を下50右30の位置で表示させたら当然下20右40がはみ出ますよね。
コードですが本当にそのままですか？構文エラー出るように見えますが。

[kyoya0819]

> 70の画像を下50右30の位置で表示させたら当然下20右40がはみ出ますよね。
> コードですが本当にそのままですか？構文エラー出るように見えますが。

はみ出ませんし、エラーも出ないはずです。

動作確認用URL
https://cdpn.io/asuchi0819/debug/abzvxzp/ZoABazLqveLr

[x_x]

> と書いているのでしょうか？

Answer 1

同じく

if ($(this).scrollTop() > 200) {

で

    if ($(this).scrollTop() > 200) {

gt;は違いますね

Answer 2

クリックしても反応しません。

以下のように修正してください。

            if ($(this).scrollTop() > 200) {

↓

            if ($(this).scrollTop() > 200) {

---

画像が右下に切れた状態で表示

fixedの包含ブロックはビューポートになるので、ご提示のコードではそのようになることは考えにくいです。
ご提示いただいていないCSSの影響かもしれません。

#pagetopのCSSが上書きされたか、たとえば、

img{
  transform:translate(40px,80px);
}

みたいなスタイルがあれば、右下に切れると思います。