[JavaScript]クリックでTOPへスクロールするコードが効きません

前提・実現したいこと

お世話になります。
添付している画像右下の「back」をクリックでページTOPへスクロールさせるためJavaScriptを書いたのですが思うように効きません。

※サイトの構成
『左右にgridで分け、右サイドは高さを100vhで固定してoverflow: scroll;やbackground-attachment: fixed;を用いてパララックス風にしています。右下は初め「next」となっていますが一番下へスクロールすると「back」へ切り替わります。』

自分で色々試したところclass="profile"のheight: 100vh;が悪さをしているようなのですが、こちらを100%など変えてしまうとデザインが崩れてしまいどうにも上手くいきませんでした。

解決できる方いましたらお力を貸してください。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>@@@@@@@@ - @@@@@@@@@@@@@@</title>
6  <meta name="description" content="@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@">
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9  <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">
10  <link rel="stylesheet" href="css/sub.css">
11</head>
12<body>
13  <div class="container-2">
14    <div class="guide">
15      <div class="id-wrapper">
16        <div class="face">
17          <a href="index.html"><img src="https://source.unsplash.com/user/erondu/300x300" alt="face photo"></a>
18        </div>
19        <h1 class="name"><a href="index.html"><ruby>@@@@<rt>@@@@@@@@</rt></ruby> <ruby>@@@@<rt>@@@@@@</rt></ruby></a></h1>
20      </div>
21      <nav class="global-nav">
22        <ul class="nav-menu">
23          <li><a href="profile.html">profile</a></li>
24          <li><a href="works.html">works</a></li>
25          <li><a href="contact.html">contact</a></li>
26        </ul>
27      </nav>
28    </div>
29    <div class="container-right">
30      <div class="profile">
31        <div class="parallax img-01">
32          <h2>Profile</h2>
33          <div class="white-wrapper">
34            <p><span>@@ @@</span></p>
35            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
36            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
37            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
38          </div>
39          <a id="scroll" class="line-next" href="#"><span>next</span></a>
40        </div>
41        <div class="content-box">Hobby ×４</div>
42        <div class="parallax img-02">
43          <h2>Photography</h2>
44          <div class="white-wrapper">
45            <p></p>
46            <p></p>
47            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
48            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
49            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
50          </div>
51        </div>
52        <div class="parallax img-03">
53          <h2>Hiking</h2>
54          <div class="white-wrapper">
55            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
56            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
57            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
58          </div>
59        </div>
60        <div class="parallax img-04">
61          <h2>Trip</h2>
62          <div class="white-wrapper">
63            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
64            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
65            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
66          </div>
67        </div>
68        <div class="parallax img-05">
69          <h2>Cooking</h2>
70          <div class="white-wrapper">
71            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
72            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
73            <p>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
74            <p></p>
75          </div>
76        </div>
77      </div>
78    </div>
79  </div>
80  <footer>
81    <p>&copy; @@@@@@@@@@@@@@ 2021</p>
82  </footer>
83  </div>
84  <script type="text/javascript" src="scripts/portfolio.js"></script>
85</body>
86</html>

css
1@charset "UTF-8";
2/* container
3--------------------------------------------------------- */
4.container-2 {
5  display: grid;
6  grid-template-columns: 8fr 26fr;
7  height: 100vh;
8  animation: fadeIn 3s ease 0s 1 normal;
9}
10@keyframes fadeIn {
11  from {
12    opacity: 0;
13  }
14  to {
15    opacity: 1;
16  }
17}
18.container-right {
19  background-color: #f6f6f6;
20  color: #024058;
21}
22/* profile
23--------------------------------------------------------- */
24.profile {
25  height: 100vh; /* 原因と思われるheight */
26  overflow: scroll;
27  scroll-snap-type: y mandatory;
28}
29.parallax {
30  height: 100%;
31  background-attachment: fixed;
32  background-position: calc(50% + calc(4 / 34 * 100vw));
33  background-size: cover;
34  background-repeat: no-repeat;
35  scroll-snap-align: start;
36}
37.parallax h2 {
38  position: relative;
39  top: 15%;
40  font-family: "Quicksand";
41  color:#fff;
42  font-size: 80px;
43  text-align: center;
44  text-shadow: 0px 0px 24px #262626;
45}
46.white-wrapper {
47  display: inline-block;
48  position: relative;
49  top: 20%;
50  left: 50%;
51  padding: 16px;
52  border: solid	1px #c0c0c0;
53  background-color: rgba(255,255,255,0.8);
54}
55.white-wrapper p {
56  color: #024058;
57}
58.white-wrapper p span {
59  font-size: 20px;
60}
61.content-box {
62  height: 100vh;
63  background: #f89174;
64  font-family: "Quicksand";
65  font-size: 80px;
66  line-height: 100vh;
67  text-align : center;
68  scroll-snap-align: start;
69}
70.img-01 {
71  background-image: url(https://source.unsplash.com/user/erondu/1500x1000);
72}
73.img-02 {
74  background-image: url(https://source.unsplash.com/user/erondu/1400x1000);
75}
76.img-03 {
77  background-image: url(https://source.unsplash.com/user/erondu/1300x1000);
78}
79.img-04 {
80  background-image: url(https://source.unsplash.com/user/erondu/1200x1000);
81}
82.img-05 {
83  background-image: url(https://source.unsplash.com/user/erondu/1100x1000);
84}
85.line-next {
86    display: inline-block;
87    position: absolute;
88    right: 40px;
89    bottom: 40px;
90    width: 1px;
91    height: 100px;
92    background-color: #024058;
93    transition: all 1.0s;
94}
95.line-next::after {
96    content: '';
97    display: block;
98    position: absolute;
99    left: 0;
100    width: 1px;
101    background-color: #fff;
102    animation: line-down 4s ease infinite;
103}
104@keyframes line-down {
105  0% {
106    bottom: 100px;
107    height: 0;
108  }
109  20% {
110    bottom: 0;
111    height: 100px;
112  }
113  40% {
114    bottom: 0;
115    height: 0;
116  }
117  100% {
118    bottom: 0;
119    height: 0;
120  }
121}
122.line-back {
123  display: inline-block;
124  position: absolute;
125  right: 40px;
126  bottom: 40px;
127  width: 1px;
128  height: 100px;
129  background-color: #024058;
130  transition: all 1.0s;
131}
132.line-back::after {
133    content: '';
134    display: block;
135    position: absolute;
136    left: 0;
137    width: 1px;
138    background-color: #fff;
139    animation: line-up 4s ease infinite;
140}
141@keyframes line-up {
142	0% {
143		top: 100px;
144		height: 0;
145	}
146	20% {
147		top: 0;
148		height: 100px;
149	}
150	40% {
151		top: 0;
152		height: 0;
153	}
154	100% {
155		top: 0;
156		height: 0;
157	}
158}
159.line-next span {
160  font-family: "Quicksand";
161  font-size: 12px;
162  writing-mode: vertical-rl;
163  animation: fadeIn 3s ease 0s 1 normal;
164}
165.line-back span {
166  position: absolute;
167  bottom: 0;
168  font-family: "Quicksand";
169  font-size: 12px;
170  writing-mode: vertical-rl;
171  animation: fadeIn 3s ease 0s 1 normal;
172}
173/* guide
174--------------------------------------------------------- */
175.guide {
176  display: grid;
177  grid-template-rows: 13fr 8fr;
178  place-items: center;
179  height: 100vh;
180}
181.id-wrapper {
182  max-width: 90%;
183}
184.face {
185  margin: 0 auto;
186  max-width: 240px;
187}
188.face img {
189  border-radius: 50%;
190}
191.name {
192  font-family: serif;
193  letter-spacing: 0.1em;
194  text-align: center;
195  ruby-position: under;
196}
197.name rt {
198  font-size: 8px;
199  letter-spacing: 1em;
200  opacity: 0.5;
201}
202.global-nav {
203  align-self: start;
204}
205.nav-menu a {
206  position: relative;
207  font-family: serif;
208  font-size: 24px;
209}
210.nav-menu a:hover {
211  opacity: 1;
212}
213.nav-menu a::after {
214  content: "";
215  position: absolute;
216  bottom: -4px;
217  left: 0;
218  width: 100%;
219  height: 2px;
220  background-color: #fff;
221  transform: scale(0, 1);
222  transform-origin: center top;
223  transition: transform 250ms;
224}
225.nav-menu a:hover::after {
226  transform: scale(1, 1);
227}
228/* footer
229--------------------------------------------------------- */
230footer {
231  position: fixed;
232  bottom: 1vh;
233  left: 1vw;
234}
235footer p {
236  font-family: serif;
237  font-size: 12px;
238  opacity: 0.7;
239}
240/* intersection
241--------------------------------------------------------- */
242html {
243  font-size: 100%;
244}
245body {
246  font-family: "Helvetica Neue", Helvetica, Arial, "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS ゴシック", "MS Gothic", sans-serif;
247  background-color: #024058;
248  color: #fff;
249  line-height: 1.7;
250  font-size: 16px;
251}
252a {
253  color: #fff;
254  text-decoration: none;
255}
256img {
257  max-width: 100%;
258}
259ul {
260  list-style: none;
261}
262* {
263  box-sizing: border-box;
264}

javascript
1// ページ下部でline-back、ページ上部でline-nextに変更
2const element = document.querySelector('.profile');
3const clientHeight = element.clientHeight;
4const scrollHeight = element.scrollHeight;
5element.onscroll = function () {
6  if (scrollHeight - (clientHeight + this.scrollTop) == 0) {
7    const element = document.querySelector('.line-next');
8    element.innerHTML = "<span>back</span>";
9    element.classList.add('line-back');
10  } else if (this.scrollTop == 0 && document.querySelector('.line-back')) {
11    const element = document.querySelector('.line-back');
12    element.innerHTML = "<span>next</span>";
13    element.classList.remove('line-back');
14  }
15};
16// クリックでTOPへスクロール
17const pageTopBtn = document.getElementById('scroll');
18pageTopBtn.addEventListener("click", function () {
19  const me = arguments.callee;
20  const nowY = window.pageYOffset;
21  window.scrollTo(0, nowY - 100);
22  if (nowY > 0) {
23    window.setTimeout(me, 10);
24  }
25});
26