Search code examples
javascriptjqueryhtmldrupaldrupal-7

Ensure click of load more does not cause user to scroll to top


I have an issue with Load More in a Drupal Site. Example link: https://www.nova969.com.au/tag/news

If a user presses Load More in that page, you will notice that the user is taken to the top. Further content is loaded. However, the user is also scrolled to the top.I will like the user to stay in the location from where the click of load more happened.

The Load More is done through Views Load More (https://www.drupal.org/project/views_load_more) and looks like below

<ul class="pager pager-load-more">
<li class="pager-next first last">
<a href="/tag/news?page=1">Load more</a>
</li>
</ul>

Any help is highly appreciated, please.

Thanks in advance.

Updates:

I have tried as below

/* Views Ajax Content Load Autoscroll Feature Disabled */
jQuery(document).ready(function(){
        //On page load
        jQuery('.pager-item a.views-ajax-scroll-processed').click(function(){
        jQuery('body, html').stop();
    });
        //Again after ajax request is completed
        jQuery(document).ajaxComplete(function(){
        jQuery('.pager-item a.views-ajax-scroll-processed').click(function(){
            jQuery('body, html').stop();
        });
    });
});

That did not work. Tried below:

(function($){

      if (Drupal.ajax)
         Drupal.ajax.prototype.commands.viewsScrollTop = null;

})(jQuery);

That did not work. Tried below line commented out. That also failed

//$(scrollTarget).animate({scrollTop: (offset.top - 10)}, 500);

Please any help?


Solution

  • I inspected the scripts on your page and it appears that you have a custom behavior that triggers a scroll to the top regardless of whatever is going on.

    Views load-more script applies Drupal.attachBehaviors() on every new appended content. In your situation, when new items are appended, sidebar behavior is reattached and reinitialized :

    Drupal.behaviors.sidebar = {
      attach: function (context, settings) {/*...*/},
      init: function () {
        $(window).scrollTop(1); // <- your issue here. 
        // ...
      }
    };
    

    The funny thing is that the author left a comment on the same line explaining this was a workaround for another issue, and suggesting to beat him... So you'll get a new/old bug by resolving this one. Horrifying cascading bugfix bug... ;)