Scroll to move tabs to the top of the page when one of them is clicked [#2190417]

I have three tabs that are displayed below the main content. By default, none is selected. On click, their content appears below the tabs.

Now I want to scroll to the div of the tabs once a tab is clicked so that the tabs appear on top of the page and the content is visible below them. But I can't figure out a way to do that.

The problem is that the content of the tabs can easily be hidden if the tabs, when clicked, are at the bottom of the viewport.

Comments

Comment #1

suaperdevel CreditAttribution: suaperdevel commented 22 November 2016 at 18:58

I fix this issue implement a Javascript Code in a custom module, simply add this code:

Drupal.behaviors.qt_accordion = {
    attach: function (context, settings) {
      $('.quick-accordion', context).once(function(){
        var id = $(this).attr('id');
        var qtKey = 'qt_' + this.id.substring(this.id.indexOf('-') +1);
        var options = settings.quicktabs[qtKey].options;

        options.active = parseInt(settings.quicktabs[qtKey].active_tab);
        if (settings.quicktabs[qtKey].history) {
          options.event = 'change';
          $(this).accordion(options);
          Drupal.quicktabsBbq($(this), 'h3 a', 'h3');
        }
        else {
          $(this).accordion(options);

          $(this).bind('accordionactivate', function(event, ui) {
            /* In here, ui.newHeader = the newly active header as a jQ object
                        ui.newContent = the newly active content area */
            $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
          });
        }
      });
    }
  };