scrollIntoView not quite working

[davearia]

Hi All

 

I have a site for company training. The page has a number of questions, each of which has a RadioButtonList for the user to input their answers. I build all the questions and answers along with any images in an asp:Repeater. On the OnSelectedIndexChanged event of the RadioButtonList I have the following code:

''' <summary>
   '''  When the user selects an answer the page scrolls to next question.
   ''' </summary>
   ''' <param name="sender"></param>
   ''' <param name="e"></param>
   ''' <remarks></remarks>
   Public Sub ScrollToNextQuestion(ByVal sender As Object, ByVal e As System.EventArgs)
       'Flag to tell code when to scroll to another question.
       Dim selectNextItem As Boolean = False

       'Get the RadioButtonList that has just been pressed.
       Dim obj As New Object
       obj = sender

       'Get the client ID of this RadioButtonList.
       Dim clientID As String = obj.ClientID

       'Stores the client ID of the label so it can be used to scroll to when the training get to the last question.
       Dim lblQuestionClientID As String = String.Empty

       For Each ri As RepeaterItem In rptQuestionnaireQuestions.Items
           'Find the RadioButtobList in the repeater
           Dim rblAnswers As RadioButtonList = CType(ri.FindControl("rblAnswers"), RadioButtonList)

           If rblAnswers.ClientID = clientID Then
               'This is the RadioButtonList the user has just pressed, there set flag so that code will select on the next iteration.
               Dim lblQuestion As Label = CType(ri.FindControl("lblQuestion"), Label)

               'Make reference to this for the event of this being the last question.
               lblQuestionClientID = lblQuestion.ClientID
               selectNextItem = True
           Else
               If selectNextItem Then             
                   'This is the control to focus to, so scroll to it.
                   Try
                       'Reference the control in the repeater that we are going to scroll down to.
                       Dim lblQuestion As Label = CType(ri.FindControl("lblQuestion"), Label)                        

                       'Render javascript to scroll to next question.
                       ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "click", "ScrollToNextQuestion('" + lblQuestion.ClientID + "');", True)                       
                   Finally
                       'Reset flag.
                       selectNextItem = False
                   End Try
               End If
           End If           
       Next

       If selectNextItem Then
           Try
               'This is the last question we don't want the page to scroll back to the start.           
               ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "click", "ScrollToNextQuestion('" + lblQuestionClientID + "');", True)
           Finally
               'Reset flag.
               selectNextItem = False
           End Try            
       End If
   End Sub

 

Which in turn uses the following javascript:

function ScrollToNextQuestion(id) 
{
   var el = document.getElementById(id)
   if (el != null)
   {        
       el.scrollIntoView(true);
       el.focus();
   }
}

If I run the code and start at question 1, the code scrolls perfectly to the next question, until each reaches the end and then stops.

 

The problem I have is if I say decide to answer for example question 5 without answering questions 1-4 . Instead of it scrolling to question 6 as I would expect, the code leaves the page where it was.

 

After some experimenting I added an alert in my javascript and found that when the alert is hit the page has actully scrolled to where I want. It is only when I click the OK on the alert it then goes back to where it started i.e. question 5. The parameter being passed from my server side code to the javascript is just same. Debugging I can see no difference at all.

 

Does anyone know of any reason why the code would scroll down and then revert back?

 

Thanks, Dave.