Question

我在桌面上有一个带有选项卡式内容的2列布局。但是，在移动设备上，第二列显示在第一列下方。单击选项卡时，您无法看到第二列，因此无法查看正在更改的内容。

有没有办法使用下面的代码我可以让它在点击每个标签时向下滚动到第二列？

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();
    });
});

Answer 1

请参阅此问题：jQuery scroll to element

您可以将代码添加到$('.video-title').click(function() { ... }。如果您可以提供小提琴或可重现的东西，我可以帮助您使用实际代码。

如果在不需要滚动的情况下执行滚动代码，则它不应执行任何操作。如果它做了你不想做的事情，比如在桌面上滚动几个像素，你可以选择编写代码/ css来避免这种情况。

Answer 2

我添加了这个小功能：

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

获取了此代码

滚动到jQuery中的内容

2 个答案: