Jquery scroll to top of div not working

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

❮ jQuery HTML/CSS Methods

Example

Return the vertical scrollbar position for a

element:

$("button").click(function(){ alert($("div").scrollTop()); });

Try it Yourself »


Definition and Usage

The scrollTop() method sets or returns the vertical scrollbar position for the selected elements.

Tip: When the scrollbar is on the top, the position is 0.

When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.

When used to set the position: This method sets the vertical position of the scrollbar for ALL matched elements.


Syntax

Return vertical scrollbar position:

Set vertical scrollbar position:

$(selector).scrollTop(position)

Parameter Description position Specifies the vertical scrollbar position in pixels


Try it Yourself - Examples

Set the vertical scrollbar position How to set the vertical scrollbar position for an element.

Toggle between classes on different scroll positions How to toggle between classes on different scroll positions.

Add smooth scrolling to page anchors Using animate() together with scrollTop() to add smooth scrolling to links.


❮ jQuery HTML/CSS Methods

★ +1

I have used a scrollTop function in jQuery for navigating to top, but strangely 'the smooth animated scroll' stopped working in Safari and Chrome (scrolling without smooth animation) after I made some changes.

But it is still working smoothly in Firefox. What could be wrong?

Here is the jQuery function I used,

jQuery:

$('a

gotop').click(function() {
$("html").animate({ scrollTop: 0 }, "slow");
//alert('Animation complete.');
//return false;
});

HTML

Go Top

CSS

gotop {
  cursor: pointer;
  position: relative;
  float: right;
  right: 20px;
  /*top:0px;*/
}

scrollTop is an element property that gets or sets the top position (vertical scroll position) of the selected element. scrollTop measures the distance from a) the top of the element to b) the element’s topmost visible content.

If there is no scrollable content, then the scrollTop value is 0. To better understand this, here’s an example.

You have an

tag with several

tags inside. Let’s say the

is given a height of 100px and the text inside the article is fairly long so it overflows out. If you set
to overflow-y: scroll, you’ve given this element scrollable content/ability to scroll. As a result, JavaScript can return a scrollTop value greater than 0.

Many times, the elements we select may not be scrollable. I’ve carelessly asked for the scrollTop position of an element and it would always return 0. In this case, I have to use `scrollTop`2 .

scrollTop`3 returns the distance of the selected element relative from the top of the closest parent element. Going back to the example I used earlier, if

’s closest parent element is `scrollTop`5, then `scrollTop`3 will return the distance between the top of `scrollTop`5 and the top of
. This value will always be the same value value regardless of the scroll event. So subtracting that value from `scrollTop`9 will give you the top position of
` relative to the window (or the element you’re listening on).

scrollTop seems to be used most frequently used (and works with) `scrollTop`2 and `scrollTop`3 because it’s very likely to assume that your `scrollTop`4 and `scrollTop`5 elements have scrollable content. Therefore, I find it safe to use `scrollTop`9 and `scrollTop`7. While we’re here, let me talk about the differences between the two.

`scrollTop`3 consists of the `scrollTop`4 element and `scrollTop`2 consists of the `scrollTop`5 element. The talk online seems to confirm with me that `scrollTop`9 is deprecated for Chrome in Strict Mode. That’s why developers fall back on the logical OR operator. `0`3 .

I have an example here where I use scrollTop`7 to create a scroll progress indicator thingy. Not sure if there’s a technical term for that yet. But it’s a fixed `0`5 at the top of the page that “fills” in from left-to-right based on the percentage the user has scrolled. Since both the `scrollTop`4 and `scrollTop`5 elements are scrollable, `scrollTop returns a value.

pageYOffset & scrollY

0`9 is a read-only window property that returns the number of pixels the document has been scrolled vertically. And

0 is the exactly same thing. The main difference is that there is better cross-browser compatibility for `0`9 than
`0 so it’s safe to just stick with `0`9. But note that neither is supported in Internet Explorer < 9.

Why my scroll top is not working?

If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

How to set scroll position to top using jQuery?

jQuery scrollTop() Method The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.

How do I make a div scrollTo the top of the page?

Add CSS.

Set the position to “sticky”. For Safari, use -webkit-sticky..

Set the top property to 0..

Add the background-color, padding, and font-size properties..

How to scroll automatically to the top of the page using jQuery?

jQuery Practical exercise Part - I : Exercise-2 Scroll to the top of the page with jQuery. JavaScript Code : $("a[href='

top']"). click(function() { $("html, body").