Двойное действие на теге привязки

Question

Я создаю видео-галерею с одним основным игроком.

Когда пользователь нажимает на ссылку, видеоролик YouTube будет воспроизводиться на основном видеопроигрывателе. Так как некоторые из видео появятся под сгибом, я хочу, чтобы страница прокручивалась вверх, чтобы пользователь мог видеть основной видеоплеер.

Мне нужно двойное действие, когда пользователь щелкает тег. 1) открыт для видео 2) прокрутка вверх

Возможно ли это как-то?

Пожалуйста, помогите.

Спасибо

Answer 1

Я сделал простой демо с функциональностью, которую вы ищете. Поскольку ваша ссылка на видео просто действует как триггер для событий на странице, вам даже не нужно использовать якорный элемент <a>. Вы можете так же легко использовать 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/