Telerik – Appbuilder > Getting javascript / jquery scroll functions to work in Telerik

/***********************************************

UPDATE

There is now a new way for scrolling to the top of the page in Telerik, and it does NOT require you to set the Kendo application to have native scrolling enabled!

The function call for doing this is:

kendo.mobile.application.scroller().reset();

Calling this function will scroll the screen to the top. And it does not require you to have to set useNativeScrolling: true as well.

In fact, I would recommend the above solution BEFORE trying the solution below, as I have had issues with the below solution (the application would lock-up the scrolling, so the user could not even scroll the window at all, ie with a finger swipe).

Hope this helps!

Jeff

***********************************************/

Hi there!

The other day I needed to find a way to scroll to the top of the page in Telerik (after pressing a button). I tried a standard javascript function call to do this – namely, window.scrollTo(0, 0), but this didn’t work for me right away. I had to set the Kendo application object to have native scrolling enabled in order to get this function to work.

To do this, find in your code where you have declared the kendo.mobile.Application object, and modify its initialization properties to have useNativeScrolling: true. In my code (generated by Telerik), this is found in the app.js file:

app.js

var bootstrap = function() {
        $(function() {
            app.mobileApp = new kendo.mobile.Application(document.body, {
                transition: 'slide',
                skin: 'nova',
                initial: 'components/home/view.html',
                useNativeScrolling: true
            });

            kendo.bind($('.navigation-link-text'), app.navigation.viewModel);
        });
    };

By default, the useNativeScrolling: true line is not included, so you have to add that in. Once that line is added, you can now use window.scrollTo(0, 0) or other javascript/jquery scroll functions in your code!

By the way, if you do not want to use native scrolling, you may want to consider using the Kendo Mobile ‘scroller’ object instead. I found myself that this would not work for me, but it might work for you. You can find out more information about it from here – http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/scroller. Also, if you want extra Kendo tips, as well as more info about the differences/advantages of native scrolling (vs Telerik scrolling) you can visit this link here – http://developer.telerik.com/featured/20-kendo-ui-mobile-telerik-appbuilder-tips-tricks/.

Hope this helps!