title: Jetpack Compose animateScrollTo to absolute coordinates or direct to element
body: <p>For scrolling in compose i use scrollState.animateScrollTo() and get coordinate element by           onGloballyPositioned {positionInRoot/positionInParent}.</p>
  <p>animateScrollTo moving by the offset value. So if we are not on top of the screen when use animateScrollTo, then we have a gap and element not on the top screen after moving.</p>
  <p>we can, first scroll to top, then scroll to coordinates of the element:</p>
  <pre><code>coroutineScope.launch {
      scrollState.scrollTo(0)
      delay(50)
      scrollState.animateScrollTo(sectionTwoCoordinates.roundToInt())
  }
  </code></pre>
  <p>But I don't like it.</p>
  <p>So maybe we can get absolute coordinates for all elements, and scroll to them. Or somehow set the id to element and scroll by ID.
  Also i cant use LazyColumn in main project, so need solution not based on it</p>
  <p><a href="https://i.stack.imgur.com/PsMgD.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PsMgD.gif" alt="enter image description here" /></a></p>
  <pre><code>@Composable
  fun ScrollSections() {
      val coroutineScope = rememberCoroutineScope()
      val scrollState = rememberScrollState()
  
  
      var sectionOneCoordinates by remember { mutableStateOf(0f) }
      var sectionTwoCoordinates by remember { mutableStateOf(0f) }
      var sectionThreeCoordinates by remember { mutableStateOf(0f) }
  
      var showSectionTwo by remember { mutableStateOf(false) }
  
      Column(
          Modifier
              .fillMaxWidth()
              .background(Color.White)
              .verticalScroll(scrollState)
      ) {
          Spacer(modifier = Modifier.height(400.dp))
          Row(modifier = Modifier.fillMaxWidth()) {
              Button(
                  onClick = {
                      coroutineScope.launch {
                          scrollState.animateScrollTo(
                              sectionOneCoordinates.roundToInt()
                          )
                      }
                  },
                  modifier = Modifier.weight(0.33f)
              ) {
                  Text(text = &quot;1&quot;)
              }
              Spacer(modifier = Modifier.width(4.dp))
              Button(
                  onClick = {
                      coroutineScope.launch {
  //                        scrollState.scrollTo(
  //                            0
  //                        )
  //                        delay(50)
                          scrollState.animateScrollTo(
                              sectionTwoCoordinates.roundToInt()
                          )
                      }
                  },
                  modifier = Modifier.weight(0.33f)
              ) {
                  Text(text = &quot;2&quot;)
              }
              Spacer(modifier = Modifier.width(4.dp))
              Button(
                  onClick = {
                      coroutineScope.launch {
                          scrollState.animateScrollTo(
                              sectionThreeCoordinates.roundToInt()
                          )
                      }
                  },
                  modifier = Modifier.weight(0.33f)
              ) {
                  Text(text = &quot;3&quot;)
              }
          }
          Spacer(modifier = Modifier.height(12.dp))
          Button(onClick = { showSectionTwo = !showSectionTwo }) {
              Text(text = &quot;Show Section 2&quot;)
          }
          Spacer(modifier = Modifier.height(50.dp))
  
  
          Column(modifier = Modifier
              .fillMaxWidth()
              .onGloballyPositioned { layoutCoordinates -&gt;
                  sectionOneCoordinates = layoutCoordinates.positionInRoot().y
              }
          ) {
              Text(text = &quot;Section 1&quot;, fontSize = 32.sp)
              Box(
                  modifier = Modifier
                      .fillMaxWidth()
                      .height(200.dp)
                      .background(test1),
                  contentAlignment = Alignment.Center
              ) {
                  Text(&quot;subsection 1&quot;)
              }
              Spacer(modifier = Modifier.height(4.dp))
              Box(
                  modifier = Modifier
                      .fillMaxWidth()
                      .height(200.dp)
                      .background(test2), contentAlignment = Alignment.Center
              ) {
                  Text(&quot;subsection 2&quot;)
              }
              Spacer(modifier = Modifier.height(4.dp))
              Box(
                  modifier = Modifier
                      .fillMaxWidth()
                      .height(200.dp)
                      .background(test3), contentAlignment = Alignment.Center
              ) {
                  Text(&quot;subsection 3&quot;)
              }
              Spacer(modifier = Modifier.height(4.dp))
              Button(
                  onClick = {
                      coroutineScope.launch {
                          scrollState.animateScrollTo(0)
                      }
                  },
                  modifier = Modifier.fillMaxWidth()
              ) {
                  Text(text = &quot;Go UP&quot;)
              }
          }
          Spacer(modifier = Modifier.height(24.dp))
          if (showSectionTwo) {
              Column(modifier = Modifier
                  .fillMaxWidth()
                  .onGloballyPositioned { layoutCoordinates -&gt;
                      sectionTwoCoordinates = layoutCoordinates.positionInRoot().y
                  }
              ) {
                  Text(text = &quot;Section 2&quot;, fontSize = 32.sp)
                  Box(
                      modifier = Modifier
                          .fillMaxWidth()
                          .height(200.dp)
                          .background(test4), contentAlignment = Alignment.Center
                  ) {
                      Text(&quot;subsection 1&quot;)
                  }
                  Spacer(modifier = Modifier.height(4.dp))
                  Box(
                      modifier = Modifier
                          .fillMaxWidth()
                          .height(200.dp)
                          .background(test5), contentAlignment = Alignment.Center
                  ) {
                      Text(&quot;subsection 2&quot;)
                  }
                  Spacer(modifier = Modifier.height(4.dp))
                  Box(
                      modifier = Modifier
                          .fillMaxWidth()
                          .height(200.dp)
                          .background(test6), contentAlignment = Alignment.Center
                  ) {
                      Text(&quot;subsection 3&quot;)
                  }
                  Spacer(modifier = Modifier.height(4.dp))
                  Button(
                      onClick = {
                          coroutineScope.launch {
                              scrollState.animateScrollTo(0)
                          }
                      },
                      modifier = Modifier.fillMaxWidth()
                  ) {
                      Text(text = &quot;Go UP&quot;)
                  }
              }
          }
          Spacer(modifier = Modifier.height(24.dp))
          Column(modifier = Modifier
              .fillMaxWidth()
              .onGloballyPositioned { layoutCoordinates -&gt;
                  sectionThreeCoordinates = layoutCoordinates.positionInRoot().y
              }
          ) {
              Text(text = &quot;Section 3&quot;, fontSize = 32.sp)
              Box(
                  modifier = Modifier
                      .fillMaxWidth()
                      .height(200.dp)
                      .background(test8),
                  contentAlignment = Alignment.Center
              ) {
                  Text(&quot;subsection 1&quot;)
              }
              Spacer(modifier = Modifier.height(4.dp))
              Box(
                  modifier = Modifier
                      .fillMaxWidth()
                      .height(200.dp)
                      .background(test7),
                  contentAlignment = Alignment.Center
              ) {
                  Text(&quot;subsection 2&quot;)
              }
              Spacer(modifier = Modifier.height(4.dp))
              Box(
                  modifier = Modifier
                      .fillMaxWidth()
                      .height(200.dp)
                      .background(test9),
                  contentAlignment = Alignment.Center
              ) {
                  Text(&quot;subsection 3&quot;)
              }
              Spacer(modifier = Modifier.height(4.dp))
              Button(
                  onClick = {
                      coroutineScope.launch {
                          scrollState.animateScrollTo(0)
                      }
                  },
                  modifier = Modifier.fillMaxWidth()
              ) {
                  Text(text = &quot;Go UP&quot;)
              }
          }
      }
  }
  
  </code></pre>