Change JS/jQuery Scroll function based on screensize

Question

I'm working on a J3 site which I've had to use quite a bit of custom html/js code. I've reached a 'can't see the wood for the tree's moment'. Joomla and PHP I can do, jQuery - my old brain doesn't seem to understand.

I have a function which scrolls to a 'div'. The div moves position depending on screensize, on desktops/larger screens it is on the right hand side, smaller screens it moves below. When clicking on a link, it shows the related information in the div.

The code I have working just scrolls to the top of the 'div', perfect on mobiles but on desktops my client has asked for the scroll to be to the top of the page rather than the div.

The page can be viewed here

My jQuery is:

jQuery(document)
  .on("click", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");

    const dataTargetElem = $("div.timeline-info#" + dataTarget);
    $(".timeline-pills .timeline-element").removeClass("active");
    currentElement.addClass("active");

    $(".timeline-info").hide();
    dataTargetElem.show();
  });

    
// Scroll to section
jQuery(document).on('click', '.scrollTo', function(e) {
  e.preventDefault();
  // target element id
  const id = $(this).attr('href');
  // target element
  const $id = $(id);
  if ($id.length = 0) {
    return;
  }
  // top position relative to the document
  const pos = $id.offset().top;
  // animated top scrolling
  $('body, html').animate({
    scrollTop: pos
  });
});

The media query which switches the layout is:

@media only screen and (max-width: 768px) {
    .home .hp-vt-image, .home.timeline-pills {
        width:50%;
    }
    .home .service:not(:last-child):before {
        left:74%;
        padding:72px 0;
        margin-top:-43px;
    }
}

Any help is much appreciated.

Signing off as a very exhausted dev.

Answer 1

This question is not particularly a Joomla question but a jQuery/HTML one, so I am not sure this should be included and answered here in JSE as a question. Probably this could get much more answers at Stack Overflow. As I understood your issue more, you are just looking for an additional jQuery/Javascript snippet, something like this:

jQuery(document).on('click', '.scrollTo', function(e)  {
   if ($(window).width() > 1025) {
       $('html, body').animate({scrollTop: 0}, 'slow');
   }
   else {
       // scroll to the content top as it does now...
   }
});

This snippet is just checking the window width and we just target landscape laptops, desktop, tablets at high res devices. If someone clicks on the .scrollTo class buttons and using these bigger screen sizes, then the whole body will scroll back to the top. Otherwise your old jQuery snippet would run on mobile screen sizes... (in the code I just use a regularly used screen size, however in Bootstrap col-lg is breaking at ≥992px, so it can be changed/used too in the code).

The combined, cleaner jQuery snippet would look something like this:

jQuery(function($) {
    $(".timeline-pills .timeline-element").on("click", function(e) {
        e.preventDefault();
        const currentElement = $(this);
        const dataTarget = currentElement.data("target");
        const dataTargetElem = $("div.timeline-info#" + dataTarget);
        $(".timeline-pills .timeline-element").removeClass("active");
        currentElement.addClass("active");

        $(".timeline-info").hide();
        dataTargetElem.show();
    
        const pos = dataTargetElem.offset().top;

        if ($(window).width() > 992) {
            $("html, body").animate({scrollTop: 0}, 'slow');
        }
        else {
            $("html, body").animate({
                scrollTop: pos
            });
        }
    });
});

in case it matters for you, you can change this line in the above code, just to keep the nicer top-margin of the content on mobile views:

const pos = $(".timeline-info-panels").offset().top;

only side note: The jQuery code you provided in your question must be cleaned up much more from the // Scroll to section part. The const id must be defined correctly, but it looks like that part is not needed at all in the code... (I did not fully understand that part of the code but this is how I understood the purpose of it ). So, I just wanted to help you in pushing this a little further. :)