jQueryのスクロールが効きません。

前提・実現したいこと

jQueryを始めたばかりの初心者です。
ページ内リンクでスクロールをつけたいです。

発生している問題・エラーメッセージ

ググって見つけたコードを貼り付け、HTMLのidを書き換えましたが反映されません。
おそらく初歩的な間違いかとは思いますがご教示頂けますでしょうか。

main.js:7 Uncaught TypeError: Cannot read property 'top' of undefined
    at HTMLAnchorElement.<anonymous> (main.js:7)
    at HTMLAnchorElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLAnchorElement.q.handle (jquery-3.2.1.min.js:3)

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4	<!-- Required meta tags -->
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8	<!-- Bootstrap CSS -->
9	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10
11	<!-- Style CSS -->
12	<link rel="stylesheet" type="text/css" href="css/style.css">
13
14	<title></title>
15</head>
16<body>
17	<header id="header" class="mt-5">
18		<div class="container">
19			<div class="row justify-content-end">
20				<div class="col-1">
21					<a href="#1" id="#1" class="text-dark">About</a>
22				</div>
23				<div class="col-1">
24					<a href="#2" id="#2" class="text-dark">Works</a>
25				</div>
26				<div class="col-1">
27					<a href="#3" id="#3" class="text-dark">Contact</a>
28				</div>
29			</div>
30		</div>
31	</header><!-- /header -->
32	<section>
33		<div class="container my-5" id="home">
34			<div>
35				<a href="#" id="href1" class="href1"></a>
36				<h2 class="text-center mb-5">About</h2>
37			</div>
38		</div>
39	</section><!-- /About -->
40	<section>
41		<div class="container mb-5">
42			<h2 class="text-center mb-5">Works</h2>
43			<div class="row mb-3 mt-5">
44			<div class="col-6">
45			<div class="embed-responsive embed-responsive-16by9">
46				<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
47			</div>
48			</div>
49			<div class="col-6">
50			<div class="embed-responsive embed-responsive-16by9">
51				<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
52			</div>
53			</div>
54			</div>
55			<small class="text-danger">※クリックするとyoutubeにリンクします。</small>
56		</div>
57		</div>
58	</section><!-- /Works -->
59	<section>
60		<div class="container text-center my-5">
61			<h2 class="my-5">Contact</h2>
62			<p class="mb-0">制作の依頼・ご相談（無料）など お気軽にお問い合わせ下さい。 </p>
63			<p class="mb-5">下記フォームよりわかる範囲で ご記入をお願いします。</p>
64			<div>
65				<form class="form">
66					<div class="form-group">
67						<label for="exampleInputEmail1">貴社名</label>
68						<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="貴社名">
69					</div>
70					<div class="form-group">
71						<label for="exampleInputPassword1">お名前<span class="text-white bg-danger font-weight-bold px-2 ml-2">必須</span></label>
72						<input type="text" class="form-control" id="exampleInputPassword1" placeholder="お名前">
73					</div>
74					<div class="form-group">
75						<label for="exampleInputPassword1">メールアドレス<span class="text-white bg-danger font-weight-bold px-2 ml-2">必須</span></label>
76						<input type="text" class="form-control" id="exampleInputPassword1" placeholder="メールアドレス">
77					</div>
78					<div class="form-group">
79						<label for="exampleInputPassword1">電話番号</label>
80						<input type="text" class="form-control" id="exampleInputPassword1" placeholder="電話番号">
81					</div>
82					<div class="form-group">
83						<label for="exampleFormControlTextarea1">お問い合わせ内容<span class="text-white bg-danger font-weight-bold px-2 ml-2">必須</span></label>
84						<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
85					</div>
86					<button type="submit" class="btn text-white font-weight-bold px-5 py-3 mt-3">内容を送信する</button>
87				</form>
88			</div>
89		</div>
90	</section><!-- /Contact -->
91	<footer>
92		<div class="container my-5">
93			<div class="row">
94				<div class="col-1">
95					<a href="#1" class="text-dark">About</a>
96				</div>
97				<div class="col-1 mx-3">
98					<a href="#2" class="text-dark">Works</a>
99				</div>
100				<div class="col-1">
101					<a href="#3" class="text-dark">Contact</a>
102				</div>
103			</div>
104		</div>
105	</footer>
106
107	<!-- Optional JavaScript -->
108	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
109	<!-- jQuery -->
110	<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
111	<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
112	<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
113	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
114	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
115	<script type="text/javascript" src="js/main.js"></script>
116</body>
117</html>

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

試したこと

animateはmin.slim.jsでは反映されないという記事を見て、slimだけを消せばいいと書いてあったので消しましたが、integrityが違うとエラーが出てきてしまいました。（bootstrapで最初に貼っていたものだったので、変更しなくても実装方法はあるとは思ったのですが・・・。）
その他プラグインを追加し直したりしました。

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

回答1件

ベストアンサー

JavaScript
1// ここで#1とか#2とか#3がとれる
2var href= $(this).attr("href"); 
3// 必ずfalseになるので上記で取得された文字列がそのまま使われるが、そんなセレクタのDOMはない
4var target = $(href == "#" || href == "" ? 'html' : href); 
5// targetが空のjQueryオブジェクトなので、offset()がundefinedになり、Cannot read property 'top' of undefined
6var position = target.offset().top;