Dots Pagination

You can follow these steps to create a dots pagination like this.

#1. Suppose we will create dots navigation with some sections: Banner, About, Products, Contact

#2. First, edit Banner section > Add a Code Block > Paste this code

<div id="banner"></div>

Next, edit About section > Paste this code into Code Block

<div id="about"></div>

Next, edit Products section > Paste this code into Code Block

<div id="products"></div>

Next, edit Contact section > Paste this code into Code Block

<div id="contact"></div>

#3. Use this code into Page Header Injection

<div class="dots-pagination">
  <a href="#banner"></a>
  <a href="#about"></a>
  <a href="#products"></a>
  <a href="#contact"></a>
</div>
<style>
.dots-pagination {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 9999;
}
.dots-pagination a{
    width: 10px;
    height: 10px;
    display: block;
    background-color: #fff;
    border-radius: 50%;
    margin-bottom: 5px;
    border: 1px solid #000;
}
  html {
  scroll-behavior: smooth;
}
</style>

#4. If you want to change dot color when it is active, like this

You can use this code under #3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $(".dots-pagination a").on("click", function() {
  $(".dots-pagination a").removeClass("active");
  $(this).addClass("active");
});
});
</script>
<style>
a.active {
  background-color: #000 !important;
}
</style>