Question

I have a number of links on my page that calls some jquery code to open up a video. The list of links can get quite long on the page. When someone clicks on a link I want it to position you to the part of the page where the video opens (<div id="player">). I thought putting in <a href="#player"... would do the trick. What am I missing?

<div id="player"></div>
<a href="#player" onclick="DoNav('<?php echo $url; ?>');"> <?php echo $result_videos[$i]["camera_name"]; ?> </a>

<script type="text/javascript">
function DoNav(theUrl)
{
  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
    mydiv.append(myvideo);
  } else {
    $('#myfileplayer').attr("src",theUrl); 
  }

} 
</script>

The code above kinda works for the first click of a video, although it positions you under the video player instead of on top. The second time I go down the list of links and click one, it doesn’t do anything at all.

I’ve also tried adding <a name="blah"></a> (that is so html4) above the div then change the href to: <a href="#blah".... That doesn’t work either.

Answer 1

If I understood correctly you want your window to be scrolled to the div#player top when a link is clicked?

Then you could do this via jQuery when you open the video

Something like this should do the trick:

$("yourLinkSelector").live('click', function(evnt){
    evnt.preventDefault();
    $('html, body').animate({scrollTop:$("div#player").offset().top - 50}, "slow");
    //then your code to open the video
});