This is a migrated thread and some comments may be shown as answers.
Scroll to top
10 Answers 774 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
rydberg
Top achievements
Rank 1
rydberg asked on 22 Feb 2012, 12:51 PM
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.

10 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 23 Feb 2012, 09:01 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
rydberg
Top achievements
Rank 1
answered on 23 Feb 2012, 09:44 AM
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", "");
0
John
Top achievements
Rank 1
answered on 26 Jun 2012, 06:20 PM
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?
0
Alexander Valchev
Telerik team
answered on 29 Jun 2012, 07:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Samuel
Top achievements
Rank 1
answered on 06 Jul 2012, 05:35 AM
The following function is what I used to scroll to the top:

function scrollToTop() {
    $('.km-content:visible').data('kendoMobileScroller').reset();
}
0
Matt
Top achievements
Rank 1
answered on 29 Jul 2012, 04:33 PM
Can I just say thanks to Samuel for this snippet :)
0
Michael Peter
Top achievements
Rank 1
answered on 27 Sep 2012, 05:24 AM
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
0
Natarajan
Top achievements
Rank 1
answered on 28 Sep 2012, 06:09 PM
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'

0
Kamen Bundev
Telerik team
answered on 29 Sep 2012, 08:02 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ryan
Top achievements
Rank 1
answered on 22 May 2013, 01:22 PM
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", "");
Asked by
rydberg
Top achievements
Rank 1
Answers by
Petyo
Telerik team
rydberg
Top achievements
Rank 1
John
Top achievements
Rank 1
Alexander Valchev
Telerik team
Samuel
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Michael Peter
Top achievements
Rank 1
Natarajan
Top achievements
Rank 1
Kamen Bundev
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or