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 jQuery snippet you provided in your question must be cleaned up much more from the // Scroll to section
part. The const id
must be defined correctly (and not be redefined later) and so on... (I did not fully understand that part of the code). So I just wanted to help you in pushing this a little further. :)