JavascriptやJQueryを用いたスムーズスクロール

LP模写をしていて、
上にあるある要素をクリックすると、下の詳しい説明に行くような構造にしようとしています。
（それを４つ設置したいです）
そこで、JavascriptかjQueryを用いて設定しようとしています。

たまたま例を示してくださっているブログを見つけ、それをみて勉強をしています。
この方は、要素ごとに下にスムーズスクロールとと、スムーズスクロールをした先に
TOPに戻れるようなボタンを設置しています。

私としては、トップに戻るボタンではなく、
上にある要素をクリックすると、
下にある説明に行き着くような構造にしたいです。

このコードのどの要素がトップに戻るための要素で
どの要素が下にスムーズスクロールする要素かがいまいちわからなくて。

ご回答いただけましたら幸いです。

https://125naroom.com/web/2899
様のブログから引用させていただきました。

html
1<div class="section s_01">
2<h2 id="s_01">jQueryのページ内リンクのスクロール（通常）</h2>
3
4  <ul>
5    <li><a href="#1">1</a></li>
6    <li><a href="#2">2</a></li>
7    <li><a href="#3">3</a></li>
8    <li><a href="#4">4</a></li>
9    <li><a href="#5">5</a></li>
10    <li><a href="#6">6</a></li>
11  </ul>
12
13  <div class="oneArea" id="1">
14    <div class="one_title">1</div>
15    <a class="button" href="#s_01">▲ メニューに戻る</a>
16  </div>
17
18  <div class="oneArea" id="2">
19    <div class="one_title">2</div>
20    <a class="button" href="#s_01">▲ メニューに戻る</a>
21  </div>
22
23  <div class="oneArea" id="3">
24    <div class="one_title">3</div>
25    <a class="button" href="#s_01">▲ メニューに戻る</a>
26  </div>
27
28  <div class="oneArea" id="4">
29    <div class="one_title">4</div>
30    <a class="button" href="#s_01">▲ メニューに戻る</a>
31  </div>
32
33  <div class="oneArea" id="5">
34    <div class="one_title">5</div>
35    <a class="button" href="#s_01">▲ メニューに戻る</a>
36  </div>
37
38  <div class="oneArea" id="6">
39    <div class="one_title">6</div>
40    <a class="button" href="#s_01">▲ メニューに戻る</a>
41  </div>
42
43  <p class="_a"><a href="https://125naroom.com/web/2899" target="_blank" class="link">View the note</a></p>
44</div>

css
1Result
2EDIT ON
3 .section .oneArea {
4    margin-bottom: 200px;
5}
6.section ul {
7    display: flex;
8    flex-wrap: wrap;
9    justify-content: space-between;
10    list-style-type: none;
11    margin: 0 0 100px;
12    padding: 0;
13    box-sizing: border-box;
14}
15.section ul li {
16    width: calc(100% / 6);
17    border-right: 1px solid #fff;
18    text-align: center;
19    box-sizing: border-box;
20}
21.section ul li:last-child {
22    border-right: none;
23}
24.section ul li a {
25    display: block;
26    padding: 10px;
27    text-decoration: none;
28    color: #fff;
29    background: #333;
30    transition-duration: 0.3s;
31}
32.section ul li a:hover {
33    opacity: 0.7;
34}
35.section .oneArea .one_title {
36    color: #fff;
37    text-align: center;
38    padding: 10px;
39    background: #333;
40}
41.section .oneArea a.button {
42    display: block;
43    font-size: 12px;
44    color: #333333;
45    text-align: center;
46    background: #f2f2f2;
47    padding: 10px;
48    text-decoration: none;
49    transition-duration: 0.3s;
50    margin-top: 40px;
51}
52.section .oneArea a.button:hover {
53    opacity: 0.7;
54}
55@media screen and (max-width: 1024px) {
56    .section .oneArea .one_title {
57        font-size: 18px;
58    }
59}
60/*====================================================================
61以下は不要です。
62====================================================================*/
63body {
64  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
65  font-size: 16px;
66  letter-spacing: .025em;
67  line-height: 1.8;
68  margin: 0;
69}
70@media screen and (max-width: 1024px) {
71  body {
72    font-size: 14px;
73  }
74}
75.section {
76  max-width: 1024px;
77  margin: 0 auto;
78  padding: 20px 20px 500px;
79}
80.section p._a {
81  font-size: 12px;
82  font-weight: bold;
83  margin: 30px 0 0;
84}
85.section p._a .link {
86  display: inline-block;
87  color: #607D8B;
88  padding-left: 1.3em;
89  text-indent: -1.3em;
90}
91.section p._a .link:before {
92  content: '';
93  display: inline-block;
94  width: 5px;
95  height: 5px;
96  border-top: 2px solid #607D8B;
97  border-right: 2px solid #607D8B;
98  -webkit-transform: rotate(45deg);
99  transform: rotate(45deg);
100  margin-right: 10px;
101}
102
103
104
105
106

javascript
1
2 $(function(){
3  // #で始まるアンカーをクリックした場合に処理
4  $('.s_01 a[href^=#]').click(function(){
5    // 移動先を0px調整する。0を30にすると30px下にずらすことができる。
6    var adjust = 0;
7    // スクロールの速度
8    var speed = 400; // ミリ秒
9    // アンカーの値取得
10    var href= $(this).attr("href");
11    // 移動先を取得
12    var target = $(href == "#" || href == "" ? 'html' : href);
13    // 移動先を調整
14    var position = target.offset().top + adjust;
15    // スムーススクロール
16    $('body,html').animate({scrollTop:position}, speed, 'swing');
17    return false;
18  });
19});