如何防止跳转链接重新加载同一页面？

Question

I have a banner that is a video and the JavaScript extension Typed js used on the banner text on my website. I placed a jumplink right below the banner for people to automatically scroll down on the next section of the homepage. The problem is whenever that jumplink is clicked, the video restarts and as well as the JS extension. I just want it to scroll without the video restarting again or the JS extension typing out the banner text

<div class="section">
  <h1>SouthernLawyers</h1>
  <p><span data-controller="typed-js"></span></p>
  <a class="btn btn-gradient" href="#">Submit</a>

  <div class="video-container">
    <div class="color-overlay"></div>
      <video muted loop autoplay id="myvideo" >
         <source src ="<%= asset_path 'banner_video.mp4' %>" type="video/mp4">
      </video>
  </div>
  <a href="#about" id="down">
    <i class="fa-solid fa-chevron-down blinking"></i>
  </a>
</div>
<div class="container">
<h1 id="about">About us</h1>
<%= "Lorem ipsum dolor sit amet, consectetur adipisicing elit " * 100 %>
</div>

Answer 1

Here ya go. That should be all you need. If it does not work I would try seeing if the extension you are using might be causing issues.

 .box { width: 200px; height: 700px; }.box-one, .box-three { background-color: #ddd; }.box-two { background-color: #000; color: #fff; }

 <ul> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> </ul> <div id="one" class="box box-one">One</div> <div id="two" class="box box-two">Two</div> <div id="three" class="box box-three">Three</div>