<div class="menu">
  <a href="#1">大宗訂購優惠</a>
  <a href="#2">客製化服務</a>
  <a href="#3">聯繫方式</a>
</div>

<article>
  <section id="1">
    <h1>大宗訂購優惠</h1>
  </section>
  <section id="2">
    <h1>客製化服務</h1>
  </section>
  <section id="3">
    <h1>聯繫方式</h1>
  </section>
 </article>
html {
  scroll-behavior: smooth;
}
.menu{
  position: fixed;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.menu a{
  color:#333;
  text-decoration: none;
  display:inline-block;
  padding:10px;
}

article{
  width:1140px;
   margin:100px auto 0;
}
section{
  height:150vh;
  text-align:center;
  border:solid 2px;
  margin-bottom:10px;
  padding-top:40px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.