Scroll to top

[rydberg]

Is there any way to programmatically scroll the listview to the top?
I have a listview where I change the contents dynamically and afterwards I would like to scroll to top.

[Petyo]

Hello,

At present, we don't expose such method (although we plan to). However, you can do this manually, using the following code snippet: 

kendoMobileApplication.view.scroller.element.find(".km-scroll-container").css("-webkit-transform", "");

Where kendoMobileApplication is the instance of your mobile application. 

Kind regards,
Petyo
the Telerik team

[rydberg]

Thank you.
I think you had a small error in you code, but making the change below made it work for me.
kendoMobileApplication.view.element.find(".km-scroll-container").css("-webkit-transform", "");

[John]

The original code snippet: 
kendoMobileApplication.view.scroller.element.find(".km-scroll-container").css("-webkit-transform", "");
worked to successfully reset the scrollbar to the top for me.  

HOWEVER, when the page is attempted to be scrolled again, the page will instantly resume its old position from before the snippet reset the CSS webkit-transform property.

Is there some sort of variable that holds the current position of the scrollview that can be reset in addition to what is mentioned in the above line of code?

[Alexander Valchev]

Hello John,

The answers of this forum thread are relatively old.
The scroller have an reset() method now, which you could use to scroll the container to top.

Regards,
Alexander Valchev
the Telerik team

[Samuel]

The following function is what I used to scroll to the top:

function scrollToTop() {

    $('.km-content:visible').data('kendoMobileScroller').reset();

}

[Matt]

Can I just say thanks to Samuel for this snippet :)

[Michael Peter]

I was not able to make samuel's code run on my app, and I have no idea how to implement the reset method on the scroller, there is no examples on how to implement all the methods for the scroller, I have read both the http://docs.kendoui.com/api/mobile/scroller#methods and http://www.kendoui.com/documentation/mobile/application/methods.aspx

and I still have not been able to implement it

here is a small snippet of my code:

<div data-role="view" data-init="resetListView">

<ul data-role="listview" id="datashow">....</ul>

</div>

 

<script>

   function resetListView(e){

     var scroller = e.view.scroller;

     scroller.reset();

  }

</script>

and it has had no success

[Natarajan]

This is another way of scroll to top,



<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    </script>
     <script type="text/javascript" language="javascript">
         $(function () {
             $('#scrlBotm').click(function () {
                 $('html, body').animate({
                     scrollTop: $(document).height()
                 },
                 1500);
                 return false;
             });
 
             $('#scrlTop').click(function () {
                 $('html, body').animate({
                     scrollTop: '0px'
                 },
                 1500);
                 return false;
             });
         });
    </script>
for more details: spray paint equipment'

[Kamen Bundev]

Hello guys,

Michael, check the scroller method of the Application, which will return a reference to the current visible content scroller and then you can reset it. Please use http://docs.kendoui.com when looking for information, instead of the old deprecated documentation.

Natarajan, the code you've posted would not work - Kendo UI Mobile scroller uses transforms to scroll instead of changing scrollTop. Even if it does look like working on first glance, it will break horribly later.

Greetings,
Kamen Bundev
the Telerik team

[Ryan]

This bit of code did the trick for me (I was specifically attempting to scroll a listview back the the top, the listview was inside a modalview):

$(".km-scroll-container").css("-webkit-transform", "");