Return to top of grid when user clicks on pager button

Question

I have a grid which can contain a lot of rows. When the user scrolls to the bottom of the grid and clicks the pager button, I want the page to return to the top of the grid rather than sticking to where they are on the bottom of the page.

What is the best way to achieve this?

I know that I can achieve what I want by by going to urlOfPage#grid but what is the best way to achieve this by adding a JQuery listener to the relevant paging elements on the page?

It was already asked ;) Check this out -> http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Mark, Mar 16 '16 at 12:19
Cheers. I was specifically wondering how to do it for the Telerik Kendo Grid but I have managed to combine the answers here with the trigger outlined here: http://www.telerik.com/forums/grid-page-change-event — GrahamJRoy, Mar 16 '16 at 13:28

score 2 · Accepted Answer · answered Mar 16 '16 at 12:19

2

Scroll to the grid using jquery on clicking pager button

$('html,body').animate({
        scrollTop: $("#"+idofgrid).offset().top},
        'slow');

answered Mar 16 '16 at 12:19

Aju John

2,131
1
8
21

score 1 · Answer 2 · answered Mar 16 '16 at 12:18

$(button).on('click', function(event) {
  event.preventDefault();
  var grid = $('.grid-class');
  $('body, html').animate({
    scrollTop: grid.offset().top
  }, 400);
});

This is a solutions that smooth scroll a user to top of the grid. Button is the pager button that triggers the scroll. Variable grid the parent element of your grid.

Return to top of grid when user clicks on pager button

2 Answers2