return false doesn't stop page from reloading on anchor click

Question

we currently have a video player with 3 custom buttons to change speed. The 3 buttons are:

Slower (clicking 1 time will slow down the video 5%, slowest being 80% from 100%).

Normal on click returns the video to 100%.

Faster Same as slower, but goes fast, max is 120%.

The buttons are located slightly down the page, but on click will make the page reset to the top. I have tried both e.preventDefault(); and setting each function to return false; but neither seem to stop the reset? What would be a possible error or solution for this problem?

function speedIncrease(e) {
       e.preventDefault();
    if (currentSpeed < 1.50) {
      currentSpeed = currentSpeed + 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
  }

  function speedDecrease(e) {
    e.preventDefault();
    if (currentSpeed > .8) {
      currentSpeed = currentSpeed - 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
  }

  function resetSpeed(e) {
    e.preventDefault();
    currentSpeed = 1;
    hapyak.playlist.get()._player.playbackRate(currentSpeed);
    updateSpeed();
  }

This current code throws an unidentified e error, even though I identify it within the function's params.

I also have tried this solution with return false;

function speedIncrease() {
    if (currentSpeed < 1.50) {
      currentSpeed = currentSpeed + 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
    return false;
  }

  function speedDecrease() {
    if (currentSpeed > .8) {
      currentSpeed = currentSpeed - 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
    return false;
  }

  function resetSpeed() {
    currentSpeed = 1;
    hapyak.playlist.get()._player.playbackRate(currentSpeed);
    updateSpeed();
  }

Edit: Here is the HTML for the buttons

<div class="video-speed-buttons-container">
  <a href="#" onclick="speedDecrease()">
      <div class="video-speed-button first">Play slower</div>
  </a>
  <a href="#" onclick="resetSpeed()">
      <div class="video-speed-button">Normal speed</div>
  </a>
  <a href="#" onclick="speedIncrease()">
       <div class="video-speed-button">Play faster</div>
  </a>
</div>

I appreciate all the help on this! Thanks!

Answer 1

Try removing the href from the <a> tag. That will prevent it from navigating to '#' which is the top of the page.