CODEWITHSUNDEEP
jqueryhtml
LightningWrist
LightningWrist

Reputation: 937

how do I prevent rapid scroll in jquery?

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> |

Upvotes: 5

Views: 137

Answers (2)

kennypu
kennypu

Reputation: 6051

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>

Upvotes: 2

Ivo
Ivo

Reputation: 2636

try to change this :

<audio id="audio-player" name="audio-player" src="http://www.ep.dev/songs/robin.mp3" >

in to this

<audio id="audio-player" name="audio-player" src="http://www.ep.dev/songs/robin.mp3#audio-player" >

I'm adding a #+idname it should go to ID on the load of the page

p.s. its hard to see with out a working code

Upvotes: 1

Related Questions