skip to Main Content

Look at this code

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
td:hover {
  background-color: lightgreen;
  color: #000000;
}

</style>
<script>
var video=document.getElementById("myVideo");

function pauseVideo(){
  video.pause();
}

function unpauseVideo(){
  video.play();
}

</script>

</head>
<body>
<video id="myVideo" width="200" height="200" controls autoplay loop>

  Your browser does not support the video tag.
</video>

<br>
<br>
<br>
<br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>

<table>
<tr>
<td>
<a href="#" onclick="pauseVideo()" style="font-size: 35px; text-decoration: none" > Pause Video</a>
</td>
<td>
<a href="#" onclick="unpauseVideo()" style="font-size: 35px; text-decoration: none" > Unpause Video</a>
</td>
</tr>
</table>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<p>End Line</p>


</body>
</html>

When I click on the Pause Video / Unpause Video button, the page jumps to the top. That is not what I want. I would like the page to stay still now when I click these buttons.

I don’t understand why it keeps jumping up to the top whenever I click them.

How do I change that?

2

Answers


  1. The undesired jump happens because you link to <a href="#" ...> which refers to the anchor at the top of your document.

    Remove the href.

    Login or Signup to reply.
  2. Try it like this;

    <a href="javascript:void(0); onclick="pauseVideo()" style="font-size: 35px; text-decoration: none" > Pause Video</a></td>
    <td>
    <a href="javascript:void(0);" onclick="unpauseVideo()" style="font-size: 35px; text-decoration: none" > Unpause Video</a>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search