how do I prevent rapid scroll in jquery?

Question

I have a simple html5 mp3 player that I found online. The player is a little bit of a scroll down from when the page loads, so when I press play or stop, the page pops up to the top out of sight of the player.

I also have some other script on the page so I'm wondering if that would cause it.

Is there anything I can add to my script to get the page to stay still when the player is used?

thanks in advance

<script>
        $(document).ready(function(){
            $("#play-bt").click(function(){
                $("#audio-player")[0].play();
                $("#message").text("Music started");
            })

            $("#pause-bt").click(function(){
                $("#audio-player")[0].pause();
                $("#message").text("Music paused");

            })
        })
    </script>

 <audio id="audio-player" name="audio-player" src="http://www.ep.dev/songs/robin.mp3" ></audio>
                        <div id="message">ROBIN - From "Snow in June"</div><br />
                        <a id="play-bt" href="#">PLAY</a> | <a id="pause-bt" href="#">PAUSE</a> | 

Answer 1

it's because your buttons have a href='#' set to them, which will cause the browser to look for a ID. remove the href and it should get rid of the popping.

change this:

<a id="play-bt" href="#">PLAY</a> | <a id="pause-bt" href="#">PAUSE</a>

to this:

<a id="play-bt">PLAY</a> | <a id="pause-bt">PAUSE</a>