Add an anchor to the redirect URL

Question

I have a website with some news. I create a view that shows them and filter by category. When I use the filter, it reloads the page and goes at the top of the page. I want it doesn't move on the top of the page.

I added an anchor to the page, but I can't add it to the view redirect link. I tried implementing hook_view_form_alter() to add a custom submission handler, but it breaks the entire form and the news are not filtered.

I also looked at hook_views_query_alter(), but it doesn't seem it allow to do what I am trying to achieve.

Is there any way to do this?

Answer 1

Here is a simple solution to scroll to top of the views results using jquery scrollTop

THEMENAME/js/views-scroll-top.js

(function ($, Drupal) {
  Drupal.behaviors.viewsScrollTop = {
    attach: function (context, settings) {
      //var scrollto = ".view-content"; // top of results
      var scrollto = ".view-filters"; // top of filters
      var url = window.location.href.split('?');
      if (url.length > 1 && $(scrollto).length) {
        $("html, body").animate({ scrollTop: $(scrollto).offset().top }, "slow");
      }
    }
  };
})(jQuery, Drupal);

THEMENAME/THEMENAME.libraries.yml

views-scroll-top:
  js:
    js/views-scroll-top.js: {}

THEMENAME/THEMENAME.theme

function THEMENAME_preprocess_page(&$variables) {
  // attach library only on specific view
  $route_name = \Drupal::routeMatch()->getRouteName();
  if ($route_name === "view.article.page_1") {
    $variables['#attached']['library'][] = 'THEMENAME/views-scroll-top';
  }
}

Change THEMENAME to your theme's name