双重动作锚定标记

Question

我正在创建一个主要播放器的视频库。

当用户点击链接的YouTube视频将在主视频播放器中播放。由于某些视频会出现在折叠下方，因此我希望页面向上滚动，以便用户可以看到主视频播放器。

我需要当用户点击该标签具有双重作用。 1）开视频2）向上滚动

是这样甚至可能吗？

请帮忙。

谢谢

Answer 1

我已经做了一个简单的演示与您正在寻找的功能。由于您的视频“链接”只是触发了页内事件，因此您甚至不必使用锚点元素。你可以很容易地使用一个span，或任何其他元素（您可能还需要更换body选择与选择一个更具体的容器元素）：

$(document).ready(function(){ 
    $('#video-link').on('click', function(e) { 
     //Scroll the user down to the video 
     $('body').animate({ 
      'scrollTop': $('#video-player').offset().top + 'px', 
     }, 400, function() { 
      //Start playing the embedded video 
      var src = $('#video-player').attr('src'); 
      $('#video-player').attr('src', src + '?autoplay=1'); 
     }); 
    }); 
}); 

注意，此代码触发视频播放通过向嵌入式视频的src属性添加自动播放标记，这有助于避免您尝试以其他方式触发视频时可能遇到的一些跨域安全限制。

还要注意的是该解决方案的时间表一个动作 - 接连（例如播放视频）（例如 - 滚动页）。这可确保用户不会错过任何视频的内容，而页面仍在滚动，因为视频不在视野中。

的jsfiddle演示：http://jsfiddle.net/nzkKv/5/