locked
Scroll to Anchor Using VB RRS feed

  • Question

  • User-1653812950 posted

    I have spent many hours trying to find an answer to the following, but all I can find are answers in JScript, not VB. I want to Scroll to an anchor tag (programmatically) using VB without a postback. I have tried the FOCUS() and SETFOCUS() function, and all this does is put a cursor (in a textbox) but does not Scroll the page. I also tried the FINDCONTROL function as well. The Anchor I am trying to Scroll to is "hlTest".

    <html>

    <script language="vbscript" runat="server">

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not IsPostBack Then ' First time ASPX page is loaded.

           Page.Title = "Find Anchor"

            Dim findCH = Page.HasControls()

           If findCH = True Then

               ' Page.SetFocus("hlTest") ' Doesn't scroll
              ' Code to Scroll to "hlTest" would go here.

            End If

        End Sub

    </script>

    <head runat="server"></head>
    <body runat="server">
    <form id="frmMain" runat="server">

    <table id="tblOne" cellpadding="0" cellspacing="0" border="2" style="width: 800px; height: 400px;" runat="server">
        <tr runat="server">
           <td align="left" valign="top" runat="server">
                 <div id="DivOne" style="; top: 0px" runat="server">
                    <label id="lblOne" runat="server"><br /><br />Text in body.</label>
              </div>
           </td>
        </tr>
    </table>

    <a name="hlTest" id="hlTest" runat="server"><label runat="server">Start here.</label></a>

    <table id="Table1" cellpadding="0" cellspacing="0" border="2" style="width: 800px; height: 400px;" runat="server">
        <tr id="Tr1" runat="server">
           <td id="Td1" align="left" runat="server">
              <label runat="server">Second Table</label>
           </td>
        </tr>
    </table>

    </form>

    </body>

    </html>

    Thanks in advance for any help.

    Thursday, February 14, 2019 2:41 AM

Answers

  • User-1653812950 posted

    Response.Write("<script>window.location.hash='#hlTest'</script>")

    For some reason, it does not like the "<" in "</script>", so the following is what finally worked.

    Dim LessThanNum As Integer = Asc("<") ' Convert to ASCII integer.
    Dim LessThan As Char = Chr(LessThanNum)
    Dim GoToAnchor As String = "<script>window.location.hash='#hlTest'" & LessThan & "/script>"
    Response.Write(GoToAnchor)

    Ackerly, If though I'm marking this post as the Answer, you get the credit for pointing me in the right direction. Thank you for your help.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 18, 2019 5:17 PM

All replies

  • User-2054057000 posted

    VB is a server side language that does not runs on the server so you cannot scroll to element with VB.

    You have to use languages that runs on browser to do this scrolling part. These are ofcourse - JavaScript, jQuery, Vue.js, react, angular, angular js, etc.

    See How To Use jQuery To Scroll To A Specific Element

    Thursday, February 14, 2019 9:58 AM
  • User753101303 posted

    Hi,

    The usual way is to use a link such as  http://site.com/yourpage.aspx#hlTest. See https://en.wikipedia.org/wiki/Fragment_identifier 

    In short the # tag allows to tell the browser which location should be reached within the HTML page.

    Thursday, February 14, 2019 10:41 AM
  • User-893317190 posted

    Hi qwsoftdraw,

    If you want to use Anchor, I suggest you could use window.location.hash to  make the fragement  refer to the id of your a link.

    You could register  javascript using vbscript.

    Below is my code.

     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                                                                                              -- set hash to # plus id of your control
                 ScriptManager.RegisterStartupScript(Me, Me.GetType(), "scroll", "window.location.hash='#hlTest'", True)
            End If
    
        End Sub

    Test page.

       <div style="height:1000px">
            </div>
           
           <a name="hlTest" id="hlTest" runat="server" href="#"><label runat="server">Start here.</label></a>
              <div style="height:1000px">
            </div>
            

    Pure vb could hardly do the same thing , I think it is simple to meet your requirement using javascript.

    Best regards,

    Ackerly Xu 

    Friday, February 15, 2019 4:42 AM
  • User-1653812950 posted

    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "scroll", "window.location.hash='#hlTest'", True)

    When I ran this code I got the following error:

    BC30390: 'System.Web.UI.Page.Private ReadOnly Property ScriptManager() As System.Web.UI.IScriptManager' is not accessible in this context because it is 'Private'

    I tried attaching the following to load the ScriptManager Class but it did not help: <%@ Import Namespace="System.Web.UI" %>

    Friday, February 15, 2019 4:34 PM
  • User-1653812950 posted

    In my original post, I requested a way to do this programmatically using VB. I will be having multiple Anchor tags eventually (like Chapters in a Book). The user will select a Chapter from a dropdownlistbox, click a "Submit" button, then the page will scroll down to the selected Chapter. I am currently using a Postback to fill in the Chapter using something similar to the following where the Anchor gets filled in via Server side code.

    <a id="btnFind" href="#CH1" class="lblGeneralBU" runat="server">
        <img id="imgFind" src="Search.jpg" alt="Search" border="0"
            style="" runat="server" />
    </a>

    ...but I would like it to scroll without a postback.

    Friday, February 15, 2019 4:43 PM
  • User409696431 posted

    The SetFocus method must be called before the page is prepared for rendering to the client in the PreRender event.

    In short, it requires a postback to set it after the page has already been rendered, since you need to go through the lifecycle again.

    If you want to avoid the look of a postback, you could put your page contents in an UpdatePanel, but you can't use SetFocus without a postback.

    If the only reason you are using the dropdownlist and submit button is to scroll to the right chapter, not pass any needed information back to the server, a client-side HTML and/or JavaScript solution makes more sense.

    Friday, February 15, 2019 9:13 PM
  • User753101303 posted

    without a postbac

    Which means with JavaScript rather than with VB ? So when the user is selecting an item in a drop down the page will just scroll to a given position ? There is no need to do something that could only be done on the server side ?

    Then see  https://stackoverflow.com/questions/39020871/anchor-tag-in-drop-down

    It could be injected using VB for the initial page display.

    Saturday, February 16, 2019 11:31 AM
  • User-893317190 posted

    Hi qwsoftdraw,

    When I ran this code I got the following error:

    BC30390: 'System.Web.UI.Page.Private ReadOnly Property ScriptManager() As System.Web.UI.IScriptManager' is not accessible in this context because it is 'Private'

    I tried attaching the following to load the ScriptManager Class but it did not help: <%@ Import Namespace="System.Web.UI" %>

    If  you couldn't use ScriptManager, you could try directly try 

      If Not IsPostBack Then
    
                Response.Write("<script>window.location.hash='#hlTest'</script>")
    
            End If

    Best regards,

    Ackerly Xu

    Monday, February 18, 2019 5:43 AM
  • User-1653812950 posted

    Response.Write("<script>window.location.hash='#hlTest'</script>")

    For some reason, it does not like the "<" in "</script>", so the following is what finally worked.

    Dim LessThanNum As Integer = Asc("<") ' Convert to ASCII integer.
    Dim LessThan As Char = Chr(LessThanNum)
    Dim GoToAnchor As String = "<script>window.location.hash='#hlTest'" & LessThan & "/script>"
    Response.Write(GoToAnchor)

    Ackerly, If though I'm marking this post as the Answer, you get the credit for pointing me in the right direction. Thank you for your help.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 18, 2019 5:17 PM
  • User-158764254 posted

    Response.Write(GoToAnchor)

    I'd suggest you avoid Response.Write and use RegisterStartupScript instead:

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.clientscriptmanager.registerstartupscript?view=netframework-4.7.2

    The reason being that whatever you write with Response.Write will appear on the response stream before your page renders and so that chunk of script will get sent to the client before your pages <!DOCTYPE>

    If the DOCTYPE does not come first, then it gets ignored and browsers may then render your page inconsistently. 

    Sunday, February 24, 2019 10:29 PM
  • User753101303 posted

    And so you could have a < href="#hlTest">There</a> in your page to go there without any postback (unless you are doing something that requires a postback which doesn't seems to be the case for now).

    Monday, February 25, 2019 8:53 AM