滾動到jQuery中的內容

我在桌面上有一個帶有選項卡式內容的2列布局。但是，在移動設備上，第二列顯示在第一列下方。當點擊標籤時，你看不到第二列，因此看不到哪些內容在改變。滾動到jQuery中的內容

有沒有辦法使用下面的代碼我可以讓它滾動到第二列點擊每個標籤？

HMTL：

<div class="video-carousel"> 
    <div class="video-titles"> 
     <div class="video-title"> 
      <h4>Video Title 1</h4> 
     </div> 
     <div class="video-title"> 
      <h4>Video Title 2</h4> 
     </div> 
     <div class="video-title"> 
      <h4>Video Title 3</h4> 
     </div> 
    </div> 
    <div class="video-contents"> 
     <div class="video-content"> 
      FIRST VIDEO HERE 
     </div> 
     <div class="video-content"> 
      SECOND VIDEO HERE 
     </div> 
     <div class="video-content"> 
      THIRD VIDEO HERE 
     </div> 
    </div> 
</div>

的jQuery：

"use strict"; 
jQuery(document).ready(function($) { 
    $('.video-title').click(function() { 
     $('.video-title').removeClass('highlighted'); 
     var index = $(this).addClass('highlighted').index(); 
     $('.video-content').hide().eq(index).show(); 
    }); 
});

來源

2017-09-01 Ricky Bailey

看到這個問題：jQuery scroll to element

您可以將代碼添加到$('.video-title').click(function() { ... }。如果你可以提供一個小提琴或可重複的東西，我可以幫你實際的代碼。

如果滾動代碼在不需要滾動的情況下執行，則它不應該執行任何操作。如果它做了一些你不想要的東西，比如在桌面上滾動幾個像素，你可以選擇編寫代碼/ css來避免這種情況。

來源

2017-09-01 10:25:18

這完全適用於移動得到這個代碼，但是我可以阻止它在桌面上使用此功能嗎？非常感謝你花時間陪伴！ –

你或許可以這樣做 $如果點擊（函數（）{ （window.matchMedia（ '（最大寬度：481px） '（' 視頻標題'。）。）匹配） { \t// Do Scrolling } } –

@RickyBailey檢查了這個問題：https：//stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery並看看什麼答案適合你的使用情況最好！ –

我前頁小功能：

jQuery.scrollTo = function scrollTo(place,speed) { 
    $('html, body').animate({ 
     scrollTop: $(place).offset().top 
    }, speed); 
}

然後，當點擊：

$('.video-title').click(function() { 
    //highlights etc. 
    $.scrollTo('.video-contents',1500); 
}

編輯：剛發現的鏈接，我通過這個question

來源

2017-09-01 10:26:07

滾動到jQuery中的內容

回答

相關問題