When the user clicks on the arrow to change testimonial how can I get it to go to the next comment?

#1

When I click on the arrow to change testimonial comment my page is automatically scrolling to the top of the webpage? Below represents the HTML code for the slider for the testimonial section. When the user clicks on the arrow to change testimonial how can I get it to go to the next comment? Github repo if you need to look at more code. This is for the index.html page.

<!-- Section -->
<div class="template-section template-section-padding-reset template-clear-fix">
<!-- Flex layout 50x50% -->
<div class="template-layout-flex template-clear-fix template-background-color-1">
<!-- Left column -->
<div>
   <!-- Header + subheader -->
   <div class="template-component-header-subheader">
      <h2>Testimonials</h2>
      <div></div>
      <span>Our customers love us</span>
   </div>
   <!-- Space -->
   <div class="template-component-space template-component-space-2"></div>
   <!-- Testimonials list -->
   <div class="template-component-testimonial-list template-clear-fix">
      <!-- Content -->
      <ul class="template-clear-fix">
         <li>
            <p>I could not be happier with the job you did on my car. It looks great. Thank you for your great service and I will continue to refer friends and family to you all.</p>
            <h6>Dotti Newman</h6>
            <span>Audi Q5</span>
         </li>
         <li>
            <p>I think Auto Spa is the best car washers ever. Love the price, convenience and customer service. Thanks so much! My car looks like new. I will definitely come again.</p>
            <h6>David Magnus</h6>
            <span>Nissan Titan X5</span>
         </li>
         <li>
            <p>Finally a car wash that does pay attention to the detail. I have a little extra time and money and I let them do the full detail and it always has turned out great.</p>
            <h6>Josh Williams</h6>
            <span>Toyota Avensis</span>
         </li>
      </ul>
      <!-- Navigation -->
      <div class="template-component-testimonial-list-navigation">
         <a href="#" class="template-component-testimonial-list-navigation-left template-icon-meta-arrow-large-rl"></a>
         <span class="template-component-testimonial-list-navigation-center template-icon-feature-testimonials"></span>
         <a href="#" class="template-component-testimonial-list-navigation-right template-icon-meta-arrow-large-rl"></a>
      </div>
   </div>
</div>
#2

I’m more curious why your testimonials are hardcoded into the page and not coming from another source?

#3

This happens when you use a href="#" the # is interpreted as an anchor and will always return to the top of the page.

One option is using href="javascript:void()" which avoids the reload.