1

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.

4
  • @mickmackusa The scroll function works fine, I just need to adjust it so it scrolls to the top of page on desktops. Currently it just scrolls the top of the #timeline-info div. This is fine on mobiles as the div expands under the image/year list. Is there away to add a media type query to change this on desktop by detecting the screensize then scrolling to the top if it is col-lg-6.
    – Dtorr1981
    Feb 28, 2023 at 13:09
  • @Dtorr1981 - it looks like that the div is not scrolling to the top fully because the div id="service-1" class="timeline-info" has margin-top: 30px; in css rules. You should just delete or comment out that rule as I see it. (I hope I did not misunderstand your issue...)
    – Zollie
    Feb 28, 2023 at 16:40
  • @Zollie Thanks Zollie, unfortunately, that is not it. On Desktops I need the scroll to go right to the very top of the page so the menu can be seen. This is more apparent if you click on the ate 1428 - You'll see the scroll doesn't go all the way to the top. On mobiles, this is fine as the timeline-info box actually moves underneath the image/date links, so we need the scroll to stay the same on mobiles (i.e. col-md-12/col-sm-12/col-xs-12). So small screens the function works as intended. For larger screens when the timeline-info is col-lg-6 I need to scroll to the top of the fpage
    – Dtorr1981
    Feb 28, 2023 at 16:54
  • @Dtorr1981 - ohh, yes, I start to understand the issue more clearly now.
    – Zollie
    Feb 28, 2023 at 17:06

1 Answer 1

2

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. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.