Animate scrolltop not working in chrome but works in firefox

Question

The following code is working in firefox but not in chrome. It's got me stumped.

$('html, body').animate({scrollTop: $('.panel-group').offset().top}, 800, 'swing');

I done some research and the code looks fine for me. I also tried the answers provides in this post but none helped me.

It might be worth noting that this code is connected to the folowing code:

function getParameterByName(name, url) {
                    if (!url) url = window.location.href;
                    name = name.replace(/[\[\]]/g, "\\$&");
                    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                        results = regex.exec(url);
                    if (!results) return null;
                    if (!results[2]) return '';
                    return decodeURIComponent(results[2].replace(/\+/g, " "));
                }

                var loadcommentform = getParameterByName('loadcommentform');

                if (loadcommentform === 'true') {
                    $('.horizontalTabs, .tab-pane').removeClass('active');
                    $('.activateComments').parent().addClass('active');
                    $('#commentsTabArea').addClass('active');
                    $('.accordion-toggle').addClass('collapsed');
                    $('.activateComments').removeClass('collapsed');
                    $('.panel-collapse').removeClass('in');
                    $('#collapse-commentsTabArea').addClass('in');
                    $('html, body').animate({scrollTop: $('.panel-group').offset().top}, 800, 'swing');
                }

It detects if the url get paramater is present. When I put alert(loadcommentform); inside the if statement I get the alert so I know the code is running. and I get no javascript errors in the browser dev tools console.

Thanks for the help :)

score 1 · Accepted Answer · answered May 22 '17 at 06:46

Omg ok so I figured it out.

Because I'm using the responsive tabs jquery plugin, I was targeting the wrong element. Firefox window was less than 991px so appeared to be working, chrome window was > 991 so appeared to not be working.

This is how I fixed it.

var getCommentFormDocWidth = $(document).width();
if (getCommentFormDocWidth < 991) {
    var sPos = $('.panel-group').offset().top;
}
else {
    var sPos = $('.tab-content').offset().top;
}
$('html, body').animate({scrollTop: sPos}, 800, 'swing');

I hope this helps someone else :)

Animate scrolltop not working in chrome but works in firefox

1 Answers1