Scroll to top

Thread is closed for posting
11 posts, 0 answers
  1. rydberg
    rydberg avatar
    6 posts
    Member since:
    Aug 2006

    Posted 22 Feb 2012 Link to this post

    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.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 23 Feb 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. rydberg
    rydberg avatar
    6 posts
    Member since:
    Aug 2006

    Posted 23 Feb 2012 Link to this post

    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", "");
  5. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 26 Jun 2012 Link to this post

    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?
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 29 Jun 2012 Link to this post

    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!
  7. Samuel
    Samuel avatar
    3 posts
    Member since:
    Nov 2010

    Posted 06 Jul 2012 Link to this post

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

    function scrollToTop() {
        $('.km-content:visible').data('kendoMobileScroller').reset();
    }
  8. Matt
    Matt avatar
    58 posts
    Member since:
    Jun 2009

    Posted 29 Jul 2012 Link to this post

    Can I just say thanks to Samuel for this snippet :)
  9. Michael Peter
    Michael Peter avatar
    2 posts
    Member since:
    Sep 2012

    Posted 27 Sep 2012 Link to this post

    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
  10. Natarajan
    Natarajan avatar
    1 posts
    Member since:
    Sep 2012

    Posted 28 Sep 2012 Link to this post

    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'
    

  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Sep 2012 Link to this post

    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!
  12. Ryan
    Ryan avatar
    2 posts
    Member since:
    Mar 2012

    Posted 22 May 2013 Link to this post

    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", "");
Back to Top
Kendo UI is VS 2017 Ready