How to scroll to specific item using jQuery

Question

I have a big table with vertical scroll bar  I would like to scroll to a specific line in this table using jQuery Javascript   Are there built-in methods to do this   Here is a little example to play with  x000D   x000D  div   x000D      width  100px  x000D      height  70px  x000D      border  1px solid blue  x000D      overflow  auto  x000D    x000D   lt div gt  x000D       lt table id  my table  gt  x000D           lt tr id  row 1  gt  lt td gt 1 lt  td gt  lt  tr gt  x000D           lt tr id  row 2  gt  lt td gt 2 lt  td gt  lt  tr gt  x000D           lt tr id  row 3  gt  lt td gt 3 lt  td gt  lt  tr gt  x000D           lt tr id  row 4  gt  lt td gt 4 lt  td gt  lt  tr gt  x000D           lt tr id  row 5  gt  lt td gt 5 lt  td gt  lt  tr gt  x000D           lt tr id  row 6  gt  lt td gt 6 lt  td gt  lt  tr gt  x000D           lt tr id  row 7  gt  lt td gt 7 lt  td gt  lt  tr gt  x000D           lt tr id  row 8  gt  lt td gt 8 lt  td gt  lt  tr gt  x000D           lt tr id  row 9  gt  lt td gt 9 lt  td gt  lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Not sure why no one says the obvious  as there s a built in javascript scrollTo function   scrollTo      element   position   top      Reference

User · Answer

You can use the the jQuery scrollTo plugin plugin      div   scrollTo   row 8

User · Answer

You can scroll by jQuery and JavaScript Just need two element jQuery and this JavaScript code      function          Generic selector to be used anywhere       js-scroll-to-id   click function e            Get the href dynamically     var destination     this  attr  href            Prevent href         link from changing the URL hash  optional      e preventDefault            Animate scroll to destination        html  body   animate         scrollTop    destination  offset   top        1500                x000D   x000D    function     x000D       Generic selector to be used anywhere x000D        js-scroll-to-id   click function e    x000D   x000D         Get the href dynamically x000D      var destination     this  attr  href    x000D   x000D         Prevent href         link from changing the URL hash  optional  x000D      e preventDefault    x000D   x000D         Animate scroll to destination x000D         html  body   animate   x000D        scrollTop    destination  offset   top x000D         1500   x000D        x000D      x000D   pane1   x000D    background   000  x000D    width  400px  x000D    height  400px  x000D    x000D   x000D   pane2   x000D    background   ff0000  x000D    width  400px  x000D    height  400px  x000D    x000D   x000D   pane3   x000D    background   ccc  x000D    width  400px  x000D    height  400px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt ul class  nav  gt  x000D     lt li gt  x000D       lt a href   pane1  class   js-scroll-to-id  gt Item 1 lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   pane2  class  js-scroll-to-id  gt Item 2 lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   pane3  class   js-scroll-to-id  gt Item 3 lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   lt div id  pane1  gt  lt  div gt  x000D   lt div id  pane2  gt  lt  div gt  x000D   lt div id  pane3  gt  lt  div gt  x000D   lt  -- example of a fixed nav menu -- gt  x000D   lt ul class  nav  gt  x000D     lt li gt  x000D       lt a href   pane3  class  js-scroll-to-id  gt Item 1 lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   pane2  class  js-scroll-to-id  gt Item 2 lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   pane1  class  js-scroll-to-id  gt Item 3 lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Dead simple  No plugins needed   var  container      div         scrollTo       row 8      container scrollTop       scrollTo offset   top -  container offset   top    container scrollTop          Or you can animate the scrolling   container animate       scrollTop   scrollTo offset   top -  container offset   top    container scrollTop          Here is a working example   Documentation for scrollTop

User · Answer

I managed to do it myself  No need for any plugins  Check out my gist      Replace  fromA with your button control and  toB with the target to which         You wanna scroll to          fromA   click function            html  body   animate   scrollTop      toB   offset   top    1500

User · Answer

I did this combination  its work for me  but facing one issue if click      move that div size is too large that scenerio scroll not down to this      particular div    var scrollDownTo      show question     nQueId  position   top          console log scrollDownTo               slider light box container   animate               scrollTop  scrollDownTo                1000  function

User · Answer

I did a combination of what others have posted  Its simple and smooth       myButton   click function               html  body   animate               scrollTop      scroll-to-this-element   position   top                1000

User · Answer

Scroll element to center of container To bring the element to the center of the container  DEMO on CODEPEN JS function scrollToCenter       var container       container        scrollTo       5       container animate         scrolls to center     scrollTop  scrollTo offset   top - container offset   top   scrollTo scrollTop   - container height     2          HTML  lt div class  quot container quot  gt      lt div class  quot 1 quot  gt      1    lt  div gt     lt div class  quot 2 quot  gt      2    lt  div gt     lt div class  quot 3 quot  gt      3    lt  div gt     lt div class  quot 4 quot  gt      4    lt  div gt     lt div class  quot 5 quot  gt      5    lt  div gt     lt div class  quot 6 quot  gt      6    lt  div gt     lt div class  quot 7 quot  gt      7    lt  div gt     lt div class  quot 8 quot  gt      8    lt  div gt     lt div class  quot 9 quot  gt      9    lt  div gt     lt div class  quot 10 quot  gt      10    lt  div gt     lt  div gt   lt br gt   lt br gt   lt button id  quot scroll quot  onclick  quot scrollToCenter   quot  gt    Scroll  lt  button gt   css  container     height  60px    overflow-y  scroll    width 60px    background-color  white     It is not exact to the center but you will not recognice it on larger bigger elements

User · Answer

I agree with Kevin and others  using a plugin for this is pointless   window scrollTo 0      element   offset   top

User · Answer

Contrary to what most people here are suggesting  I d recommend you do use a plugin if you want to animate the move  Just animating scrollTop is not enough for a smooth user experience  See my answer here for the reasoning   I have tried a number of plugins over the years  but eventually written one myself  You might want to give it a spin  jQuery scrollable  Using that  the scroll action becomes   container scrollTo  targetPosition      But that s not all  We need to fix the target position  too  The calculation you see in other answers    target offset   top -  container offset   top    container scrollTop     mostly works but is not entirely correct  It doesn t handle the border of the scroll container properly  The target element is scrolled upwards too far  by the size of the border  Here is a demo   Hence  a better way to calculate the target position is  var target    target 0        container    container 0    targetPosition    container scrollTop     target getBoundingClientRect   top - container getBoundingClientRect   top - container clientTop    Again  have a look at the demo to see it in action    For a function which returns the target position and works for both window and non-window scroll containers  feel free to use this gist  The comments in there explain how the position is calculated   In the beginning  I have said it would be best to use a plugin for animated scrolling  You don t need a plugin  however  if you want to jump to the target without a transition  See the answer by  James for that  but make sure you calculate the target position correctly if there is a border around the container

User · Answer

You can use scrollIntoView   method in javascript  just give id scrollIntoView     For example   row 5 scrollIntoView

User · Answer

I realise this doesn t answer scrolling in a container but people are finding it useful so      html body   animate  scrollTop  some element offset   top      We select both html and body because the document scroller could be on either and it is hard to determine which  For modern browsers you can get away with   document body    Or  to go to the top of the page      html body   animate  scrollTop  0      Or without animation     window  scrollTop some element offset   top     OR     window scrollTo 0  some element offset   top      native equivalent  x  y

User · Answer

For what it s worth  this is how I managed to achieve such behavior for a general element which can be inside a DIV with scrolling  without knowing the container   It creates a fake input of the height of the target element  and then puts a focus to it  and the browser will take care about the rest no matter how deep within the scrollable hierarchy you are  Works like a charm   var  scrollTo       someId    inputElem       lt input type  text  gt  lt  input gt       scrollTo prepend inputElem   inputElem css     position   absolute     width   1px     height   scrollTo height       inputElem focus    inputElem remove

[javascript] How to scroll to specific item using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to scroll