ラジオボタンを選択すると、同じページ内の特定部分へジャンプする方法

前提・実現したいこと

ラジオボタンで選択肢から一つの値を選択すると、値を保持したまま同じページ内の特定部分へジャンプできるようにしたいです。
例えば、「梅」を選択すると、「梅」のボタンは緑のまま「ここに飛ぶ」まで移動し（ページ内リンク）、submitで値をPOSTできるようにするには、どのような方法があるでしょうか。どうぞよろしくお願いします。

該当のソースコード

HTML
1<html>
2<body>
3<form method="POST" action="./check.php">
4<div class="sample">
5    <input type="radio" name="s3" id="select1" value="1" checked="">
6    <label for="select1">みかん</label>
7    <input type="radio" name="s3" id="select2" value="2">
8    <label for="select2">梅</label>
9    <input type="radio" name="s3" id="select3" value="3">
10    <label for="select3">ラーメン</label>
11    <input type="radio" name="s3" id="select4" value="4">
12    <label for="select4">パンダ</label>
13    <input type="radio" name="s3" id="select5" value="5">
14    <label for="select5">高野山</label>
15</div>
16<br>
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
37<div id="contactform"><p>ここに飛ぶ</p></div>
38<input type="hidden" name="shop_id" value="13">
39<input type="submit" value="確認画面" class="submit">
40</form>
41</body>
42</html>
43<script>
44    $(document).on('click','.sample label ', function(){
45	$("html,body").animate({
46		scrollTop:$('#contactform').offset().top
47	},300);
48});
49 </script>

css
1.sample input{
2	display: none;
3}
4.sample label{
5	display: block;
6	float: left;
7	cursor: pointer;
8	width: 80px;
9	margin: 0;
10	padding: 12px 5px;
11	border-right: 1px solid #abb2b7;
12	background: #bdc3c7;
13	color: #555e64;
14	font-size: 14px;
15	text-align: center;
16	line-height: 1;
17	transition: .2s;
18}
19.sample label:first-of-type{
20	border-radius: 3px 0 0 3px;
21}
22.sample label:last-of-type{
23	border-right: 0px;
24	border-radius: 0 3px 3px 0;
25}
26.sample input[type="radio"]:checked + label {
27	background-color: #a1b91d;
28	color: #fff;
29}

試したこと

<label>の文字を<a>タグで囲んで、下記のコードを追加しても、上移動しませんでした

javascript
1<script>
2    $(document).on('click','.sample label a', function(){
3	$("html,body").animate({
4		scrollTop:$('#contactform').offset().top
5	},300);
6});
7 </script>

itagagaki

2021/10/08 11:22

> 上手く動きませんでした動いているように見えますが。「うまく動かない」だけでは伝わりません。どうなることを期待していて、実際はどうなったのでしょうか。

emi_ono

2021/10/08 13:20 編集

説明が悪くて申し訳ありません。ページ内リンクのように指定のidタグへ移動する動きを作りたいです。その動きを<a>タグを使わずにラジオボタンでできないでしょうか。例えば <input type="radio" name="s3" id="select1" value="1" checked=""> <label for="select1">みかん</label>" の部分のラジオボタンを選択すると、 <div id="contactform"><p>ここに飛ぶ</p></div>まで移動し表示される。このような動きを期待しています。現在ラジオボタンを選択するとcssの設定通りに色は変化するのですが、移動しない状態です。

itagagaki

2021/10/08 13:26

試したこと1でcontactformに移動しますよ。 JQueryは読み込んでいますか？ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

emi_ono

2021/10/08 13:34

ありがとうございます！ JQueryの読み込みを失念しておりました。。ベストアンサーに選びたいのですが、どうしたら良いでしょうか。

itagagaki

2021/10/08 13:35

いや、解決した方法をご自分で回答として書いて質問を閉じちゃって大丈夫です。

emi_ono

2021/10/08 13:37

ありがとうございます。