雙重動作錨定標記

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/