Scroll to anchor after ajax

4 posts, 0 answers
  1. Mattias Moberg
    Mattias Moberg avatar
    18 posts
    Member since:
    Aug 2009

    Posted 30 Jan 2012 Link to this post

    Hi.
    Im using the radajaxmanager.
    Is there any way to scroll to anchor #posts after ajax ?

    edit:
    Code below is what im using to scroll to #posts
    Is there any way to animate this scroll, to make it smoother ?

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(OnEndRequest);
    function OnEndRequest(sender, args) {
        window.location.hash = '#posts';
    }
  2. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 02 Feb 2012 Link to this post

    Hi Mattias,

    You could achieve your scenario by following the code below. Note that jQuery should be included.
    $telerik.$("body").animate({ scrollTop: $telerik.$("a[name='posts']").position().top }, 2000);
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        </Scripts>
    </telerik:RadScriptManager>

    Greetings,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Mattias Moberg
    Mattias Moberg avatar
    18 posts
    Member since:
    Aug 2009

    Posted 03 Feb 2012 Link to this post

    Hi.
    Thanks for answer. But i cannot get this to work at all.
    In IE8, IE9 i get scripterror:
     Unable to get value of the property 'top': object is null or undefined

    In firefox, chrome, safari nothing happends at all..
  4. Mattias Moberg
    Mattias Moberg avatar
    18 posts
    Member since:
    Aug 2009

    Posted 05 Feb 2012 Link to this post

    This is how I ended up and its working fine in Firefox, Safari, Chrome.
    In IE9, there is a small problem. After scrolling, content on page is not selectable.

    If there is a better solution, please let me know.. Thanks.

    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(OnEndRequest);
        function OnEndRequest(sender, args) {
            $telerik.$('html, body').animate({ scrollTop: $telerik.$('#posts').offset().top }, 2000);
        }
    </script>
Back to Top