scrollTop() is not working in mobile view or mobile devices

Question

I want to scroll to the bottom of the div when the page loads. I am using jQuery's animate() function this. The issue is that my code is working on desktop view, but if I change it to mobile view then my code is not working.

$(".chat-msg-list").animate({
  scrollTop: $(".chat-msg-list").prop("scrollHeight")
}, 1000);

does the problem occur in mobile view in desktop browser or in mobile device's browser ? — PaulShovan, Nov 02 '17 at 10:35
@gypsyCoder issue occurs in both case desktop browser or in mobile device's browser — abhi singh, Nov 02 '17 at 10:36
you can try this : https://stackoverflow.com/a/14422360/2805075 — PaulShovan, Nov 02 '17 at 10:42

score 0 · Answer 1 · answered Nov 02 '17 at 10:45

jQuery:

$(".chat-msg-list").animate({
        scrollTop: $(".chat-msg-list").offset().top},
}, 1000);

Javascript:

 function getElementY(query) {
  return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
}

function doScrolling(element, duration) {
    var startingY = window.pageYOffset
    var elementY = getElementY(element)
    // If element is close to page's bottom then window will scroll only to some position above the element.
    var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
    var diff = targetY - startingY
    // Easing function: easeInOutCubic
    // From: https://gist.github.com/gre/1650294
    var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
    var start

    if (!diff) return

    // Bootstrap our animation - it will get called right before next frame shall be rendered.
    window.requestAnimationFrame(function step(timestamp) {
        if (!start) start = timestamp
        // Elapsed miliseconds since start of scrolling.
        var time = timestamp - start
            // Get percent of completion in range [0, 1].
        var percent = Math.min(time / duration, 1)
        // Apply the easing.
        // It can cause bad-looking slow frames in browser performance tool, so be careful.
        percent = easing(percent)

        window.scrollTo(0, startingY + diff * percent)

            // Proceed with animation as long as we wanted it to.
        if (time < duration) {
          window.requestAnimationFrame(step)
        }
    })
}

//Apply event handlers. Example of firing the scrolling mechanism.
doScrolling('#section1', 1000)

scrollTop() is not working in mobile view or mobile devices

1 Answers1