Search code examples
facebookpluginschatmessengerautoscroll

Facebook chat plugin auto scrolls page to top when loaded

I am using Facebook Chat plugin version 8.0 on a site powered by OpenCart (though I suspect it will happen in any CMS). It always takes a few seconds for the chat plugin to fully load and the icon to appear in the lower right corner of the page.

However, when the icon is displayed, the page immediately scrolls to the top. So if a user already started scrolling down, he is interrupted and the page is reset.

Any idea what might be causing this and how to prevent it?

This is my code (vanilla code auto generated by Facebook in Settings->Messaging->Add Messenger to your website):

<script>      

        FB.init({
            xfbml            : true,
            version          : 'v8.0'
          });
        };

        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  
</script>

        <!-- Your Chat Plugin code -->
        <div class="fb-customerchat"
            greeting_dialog_display="hide"
            attribution=setup_tool
            page_id="xxxxxxxxxxxxxxxx"
            theme_color="#67b868">
        </div>
Solution

  • The bug is currently being tracked here: https://developers.facebook.com/support/bugs/619023102320436/.

    At the moment I have implemented the following hack (around the load time of the plugin):

    var originalScrollTo = window.scrollTo;
window.scrollTo = function() {};

setTimeout(function() {
 window.scrollTo = originalScrollTo;
}, 5000);