Scroll to content in jQuery

Question

I have a 2-column layout with tabbed content on desktop. However, on mobile the second column displays below the first column. When clicking the tabs, you can't see the second column and therefore can't see what content is changing.

Is there a way using the following code I can get it to scroll down to the second column on clicking each tab?

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

score 2 · Accepted Answer · answered Sep 01 '17 at 10:25

2

See this question: jQuery scroll to element

You could add the code to the $('.video-title').click(function() { ... }. If you could provide a fiddle or something reproducible, I could help you with the actual code.

If the scroll code is executed without the need to scroll, it should do nothing. If it does something you don't want, like scroll a few pixels on desktop, you could optionally write code/css to avoid that.

answered Sep 01 '17 at 10:25

Jeff Huijsmans

1,263
14
30

This works perfectly on mobile, but can I stop it from using this function on Desktop? Thanks very much for your time! – Ricky Bailey Sep 01 '17 at 10:47
You probably can do something like $('.video-title').click(function() { if (window.matchMedia('(max-width: 481px)').matches) { //Do Scrolling } } – lennert_h Sep 01 '17 at 11:33
@RickyBailey check out this question: https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery and see what answer fits your use-case the best! – Jeff Huijsmans Sep 01 '17 at 11:39

lennert_h · Answer 2 · 2017-09-01T10:36:05.810

0

I addthis little function:

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

Then when clicking:

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

Edit: just found the link, I got this code via this question

edited Sep 01 '17 at 10:36

answered Sep 01 '17 at 10:26

lennert_h

113
12

Scroll to content in jQuery

2 Answers2