I have Kendo window that has a scrollbar. If the user scrolls down to the bottom of the window content, closes the window, and then reopens, the window opens with in the same scroll position (i.e. at the bottom of the window content). However, I would like for the window to always display back at the top of the content on reopening. How can this be done?

Here's the jsfiddle demonstrating the issue:

/

Here's some code from the fiddle since I have to include this for the post to work...

var win;
function openWindow() {
    if (!win) {
        win = $('#win').kendoWindow({
            modal: true,
            width: '100px',
            height: '100px'
        });
    }
    $('#win').css('display', '');
    win.data('kendoWindow').center().open();
}

$(document).ready(function() {
    $('#button').click(openWindow);
});

I have Kendo window that has a scrollbar. If the user scrolls down to the bottom of the window content, closes the window, and then reopens, the window opens with in the same scroll position (i.e. at the bottom of the window content). However, I would like for the window to always display back at the top of the content on reopening. How can this be done?

Here's the jsfiddle demonstrating the issue:

http://jsfiddle/e6shF/24/

Here's some code from the fiddle since I have to include this for the post to work...

var win;
function openWindow() {
    if (!win) {
        win = $('#win').kendoWindow({
            modal: true,
            width: '100px',
            height: '100px'
        });
    }
    $('#win').css('display', '');
    win.data('kendoWindow').center().open();
}

$(document).ready(function() {
    $('#button').click(openWindow);
});

• javascript
• scroll
• window
• kendo-ui

1 Answer 1

To scroll your <div id="win"> back to the top position just run:

$("#win").scrollTop(0);

after reopening it:

var win;
function openWindow() {
    if (!win) {
        win = $('#win').kendoWindow({
            modal : true,
            width : '100px',
            height: '100px'
        });
    }
    $('#win').css('display', '');
    win.data('kendoWindow').center().open();
    $('#win').scrollTop(0);
}
$(document).ready(function() {
    $('#button').click(openWindow);
});

or if you want to simplify your code:

$(document).ready(function () {
    function openWindow() {
        win.center().open();
        win.element.scrollTop(0);
    }
    var win = $('#win').kendoWindow({
        visible: false,
        modal  : true,
        width  : '100px',
        height : '100px'
    }).data("kendoWindow");
    $('#button').click(openWindow);
});