fadein,fadeoutについて

前提・実現したいこと

jQuery
1
2
3トップページに戻るボタンを作っています。フェードイン、フェードアウト機能を使って
4ある程度移動するまで非表示にして、下までいったら戻るボタンを再表示させたい
5
6```### 発生している問題・エラーメッセージ

Uncaught ReferenceError: topBtn is not defined
at dispatch (jquery-3.3.1.min.js:2)
at y.handle (jquery-3.3.1.min.js:2

```jquery

$(function () {
    // 上に戻るボタンの初期化
    let topBtn = $('#scrollTop');
    topBtn.hide();
});
// ある程度スクロールされたら、上に戻るボタンを表示する
$(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
        topBtn.fadeIn();
    } else {
        topBtn.fadeOut();
    }
});

// クリックで上に戻るボタン
topBtn.click(function (event) {
    event.preventDefault();
    $('body,html').animate({
        scrollTop: 0
    },500);
});

試したこと

まずは間違いがないか、正解のコードと見比べて何も間違ってないのを確認しました。

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

とくにありません

m.ts10806

2020/04/24 09:41

コードはマークダウンのcode機能を利用してご提示ください。

kei344

2020/04/24 10:29

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、コード自体も切れているようなので、補完してください。

kei344

2020/05/03 10:48

コードが切れているので、補完してください。

m.ts10806

2020/05/08 08:43

「正解のコードとの確認」を目視ではなく機械的に行った証跡をご提示ください。

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

回答2件

ベストアンサー

平で提示されてコードインデントがないので分かりづらいですが、スコープの問題じゃないですかね。

js
1{
2    let a = "test";
3}
4
5console.log(a);

投稿2020/04/24 09:44

編集2020/04/24 09:46

m.ts10806

総合スコア80850

kei344

2020/05/08 07:48

原因はこれですね。

miyasan

2020/05/08 10:33

ありがとうございました。先ほど作り直しして、ｈｔｍｌのコードをあとで書いたら上手く機能しました。

m.ts10806

2020/05/08 10:41

コードだけでマークダウンされてない回答だと誰も何のことか分からないと思います。私の回答が理解できたかどうかの方が大事なのですけど・・・ https://teratail.com/help/question-tips#questionTips4-2

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

html
1```コード
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6  <meta charset="UTF-8">
7  <title>インプレス いちばんやさしいJavaScriptの教本</title>
8  <link rel="stylesheet" href="css/style.css">
9</head>
10
11<body>
12  <p>サンプルです</p>
13  <p>サンプルです</p>
14  <p>サンプルです</p>
15  <p>サンプルです</p>
16  <p>サンプルです</p>
17  <p>サンプルです</p>
18  <p>サンプルです</p>
19  <p>サンプルです</p>
20  <p>サンプルです</p>
21  <p>サンプルです</p>
22  <p>サンプルです</p>
23  <p>サンプルです</p>
24  <p>サンプルです</p>
25  <p>サンプルです</p>
26  <p>サンプルです</p>
27  <p>サンプルです</p>
28  <p>サンプルです</p>
29  <p>サンプルです</p>
30  <p>サンプルです</p>
31  <p>サンプルです</p>
32  <p>サンプルです</p>
33  <p>サンプルです</p>
34  <p>サンプルです</p>
35  <p>サンプルです</p>
36  <p>サンプルです</p>
37  <p>サンプルです</p>
38  <p>サンプルです</p>
39  <p>サンプルです</p>
40  <p>サンプルです</p>
41  <p>サンプルです</p>
42  <p>サンプルです</p>
43  <p>サンプルです</p>
44  <p>サンプルです</p>
45  <p>サンプルです</p>
46  <p>サンプルです</p>
47  <p>サンプルです</p>
48  <p>サンプルです</p>
49  <p>サンプルです</p>
50  <p>サンプルです</p>
51  <p>サンプルです</p>
52  <p>サンプルです</p>
53  <p>サンプルです</p>
54  <p>サンプルです</p>
55  <p>サンプルです</p>
56  <p>サンプルです</p>
57  <p>サンプルです</p>
58  <p>サンプルです</p>
59  <p>サンプルです</p>
60  <p>サンプルです</p>
61  <p>サンプルです</p>
62  <p>サンプルです</p>
63  <p>サンプルです</p>
64  <p>サンプルです</p>
65  <p>サンプルです</p>
66  <p>サンプルです</p>
67  <p>サンプルです</p>
68  <p>サンプルです</p>
69  <p>サンプルです</p>
70  <p>サンプルです</p>
71  <p>サンプルです</p>
72  <p>サンプルです</p>
73  <p>サンプルです</p>
74  <p>サンプルです</p>
75  <p>サンプルです</p>
76  <p>サンプルです</p>
77  <p>サンプルです</p>
78  <p>サンプルです</p>
79  <p>サンプルです</p>
80  <p>サンプルです</p>
81  <p>サンプルです</p>
82  <p>サンプルです</p>
83  <p>サンプルです</p>
84  <p id="scrollTop"><a href="#">page top</a></p>
85  <script src="js/jquery-3.1.1.min.js"></script>
86  <script src="js/app.js"></script>
87</body>
88
89</html>