How to open a view and scroll down to a specific anchor ?

[Yohann]

Glad to be the first one on this thread !

I have the following page :

<!-- EVENT Page !!! Inherit the layout just above for footer and header -->
        <div data-role="view" data-layout="overview-layout" data-show="showEvent" data-init="initEvent" data-title="Meet My Friends" id="event" data-id="0" data-transition="slide">
            <div data-role="content" class="content">

                <div id="eventContent"></div>

                <div class="eventButtons"> <!-- We'll have to add the join this friend at event -->
                    <table class="friends-tabs">
                        <tr>
                            <td class="tab-active" data-friends="might">Recommended</td>
                            <td class="friends-tab" data-friends="notifs">Wanna Go</td>
                            <td class="friends-tab" data-friends="invites">Invites</td>
                            <td class="friends-tab" data-friends="all">All</td>
                        </tr>
                    </table>
                </div>

                <div data-role="scroller" class="scrollerFriends">
                    <ul id="friendsToInvite"></ul>
                </div>

                <div>
                    <form id="friendSearchForEvent" class="km-filter-form">
                        <div class="km-filter-wrap">
                            <input type="text" id="messageInputFSE" placeholder="Friend Name" style="width:85%"/>
                            <button id="searchFriendForEvent" class="button2 btn-grey">Go</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

And when someone click on a link to this page (basically href="\\#event? ..." ) I would like to redirect them to the div#friendsToInvite in within that view.

I guess I can do this with the scroller method scroll to but the height of the page vary depending on the template. Since Kendo UI uses # tags to select the view to be displayed, how can I sepcify a div based on ID ?
Many Thanks

[Kiril Nikolov]

Hi Yohann,

If you wrap your content inside a Kendo UI Scroller, then you can use its scrollTo() method to scroll to the desired item, using the jQuery position() method to determine its location. Here is an example that shows a sample approach:

http://jsbin.com/muvip/1/edit

Regards,
Kiril Nikolov
Telerik