<main>
  <nav><a href="#1">Bölüm 1</a> | <a href="#2">Bölüm 2</a> | <a href="#3">Bölüm 3</a></nav>
  <section id="1">
    <h2>Bölüm 1</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
  </section>

  <section id="2">
    <h2>Bölüm 2</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
  </section>

  <section id="3">
    <h2>Bölüm 3</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi asperiores obcaecati optio, quidem provident ea veniam tempora fugiat id quos voluptatibus aliquid delectus ullam vero sapiente. Facilis odio at architecto.</p>
  </section>

  <div class="top-container">
  <a href="#">
    <svg height="48" viewBox="0 0 48 48" width="48" height="48px">
        <path d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
        </svg>
  </a>
  <div>
</main>
:root {
  --text-color: rgb(107, 114, 128);
  --title-color: rgb(55, 65, 81);
  --button-bg-color: rgb(0, 102, 254);
  --button-color: rgb(255, 255, 255);
}

@import url('https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap');

body{
  font-family: 'Lato', sans-serif;
  background-color: #fafafa;
  line-height: 1.5;
  font-size: 16px;
  color: var(--text-color);
  margin-top: 30px;
}

nav {
  text-align: center;
}

nav a {
  color: var(--button-bg-color);
}

main {
  position: relative;
  width: 700px;
  margin-inline: auto;
}

section {
  padding: 20px 50px;
  margin-bottom: 50px;
}

h2 {
  color: var(--title-color);
}

.top-container {
  position: absolute;
  top: 12rem;
  right: 2rem;
  bottom: 0;
  pointer-event: none;
}

.top-container a {
  position: sticky;
  display: inline-block;
  top: -5rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: -5rem;
  transform: translateY(100vh);
}

.top-container svg {
  outline: none;
  background-color: var(--button-bg-color);
  border-radius: 50%;
  pointer-event: all;  
}

.top-container svg path {
  fill: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.