ナブバーをクリックした際に、同ページ内の指定された場所にジャンプさせたい

現在ポートフォリオを作成しています。
作成されているナブバーから同一ページの指定の場所にジャンプさせたいです。
例えば　Aboutをクリックしたら、同ページ内の自分のプロフィールが書いてあるところに画面を移動させたいです。

header
1<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
2			    <ul class="navbar-nav">
3			      <li class="nav-item active">
4			        <a class="nav-link" href="index.php">Home 
5			      <span class="sr-only">(current)</span></a>
6			      </li>
7			      <li class="nav-item">
8			        <a class="nav-link" href="">About</a>
9			      </li>
10				  <li class="nav-item">
11			        <a class="nav-link" href="#">Service</a>
12			      </li>
13			      <li class="nav-item">
14			        <a class="nav-link" href="#">Work</a>
15			      </li>
16			      <li class="nav-item">
17			        <a class="nav-link" href="#">Blog</a>
18			      </li>
19			      <li class="nav-item">
20			        <a class="nav-link" href="#">Contact</a>
21			      </li>
22			    </ul>
23			  </div>

それぞれのhref=""の部分にリンクを入れたらいいかとは思うのですが、
同ページのため、それぞれの項目別のURLがあるというわけではありません。

例えば、上のコードのAboutに下記のfront-page.phpのコードで作成された部分をリンクさせたい場合、
どういった記述をしたらいいのでしょうか。

front
1 <section id="about">
2	    <div class="container mt-5">
3			<div class="row bg-white shadow py-4">
4				<div class="col-md-6">
5					<div class="row md-4">
6						<div class="col-md-5">
7							<img src="<?php echo get_template_directory_uri(); ?>/sozai/profile.jpeg" class="img-fluid">
8						</div>
9						<div class="col-md-7">
10							<p id="name"><span class="title-s">Name:</span>K</p>
11							<p><span class="title-s">Email:</span>k</p>
12							<ul class="d-flex px-0">
13				    		 	<li class="mr-3"><a href="h">
14				    		 	 <span class="ico-circle"><i class="fab fa-facebook-square fa-3x fb_blue"></i></span>
15				    		 	</a></li>
16				    		 	<li class="mr-3"><a href="#">
17				    		 	 <span class="ico-circle"><i class="fab fa-instagram-square fa-3x ig_pink"></i></span>
18				    		 	</a></li>
19				    		 	<li class="mr-3"><a href="#">
20				    		 	 <span class="ico-circle"><i class="fab fa-twitter fa-3x twiiter_blue"></i></span>
21				    		 	</a></li>
22				             </ul>
23						</div>
24					</div>
25				 <div class="m-md-4">
26				     <p class="title-s">Skill</p>
27					 <span>HTML</span><span class="float-right">85%</span>
28					  <div class="progress mb-3">
29					  <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
30					  </div>
31					 <span>CSS3</span><span class="float-right">75%</span>
32					  <div class="progress mb-3">
33					  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
34					  </div>
35					 <span>PHP</span><span class="float-right">50%</span>
36					  <div class="progress mb-3">
37					  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
38					  </div>
39				 </div>
40				</div>
41				<div class="col-md-6 pt-4">
42					<h2 class="pt-5 pt-md-0">Profile</h2>
43					<div class="line-left"></div>
44					<h3 class="lead mt-3">
45					 W<br>
46					 特<br>
47					 ど<br>
48					 ま
49					</h3>
50					<h3 class="pt-5 mt-2">Computer Specs</h3>
51					<div class="line-left"></div>
52					<p class="lead mt-3">
53					PC；</br>
54					Sp</br>
55				    </p>
56				</div>
57			</div>
58		</div>
59    </section>
60