How to scroll to an element inside a div

Question

I have a scrolled div and I want to have an event when I click on it  it will force this div to scroll to view an element inside  I wrote its JavasSript like this  document getElementById chr  scrollIntoView true    but this scrolls all the page while scrolling the div itself  How to fix that  I want to say it like this  MyContainerDiv getElementById chr  scrollIntoView true

User · Answer

We can resolve this problem without using JQuery and other libs.

I wrote following code for this purpose:

You have similar structure ->

<div class="parent">
  <div class="child-one">

  </div>
  <div class="child-two">

  </div>
</div>

JS:

scrollToElement() {
  var parentElement = document.querySelector('.parent');
  var childElement = document.querySelector('.child-two');

  parentElement.scrollTop = childElement.offsetTop - parentElement.offsetTop;
}

We can easily rewrite this method for passing parent and child as an arguments

User · Answer

Native JS  Cross Browser  Smooth Scroll  Update 2020  Setting ScrollTop does give the desired result but the scroll is very abrupt  Using jquery to have smooth scroll was not an option  So here s a native way to get the job done that supports all major browsers  Reference - caniuse    get the  quot Div quot  inside which you wish to scroll  i e  the container element  const El   document getElementById  xyz        Lets say you wish to scroll by 100px   El scrollTo  top  100  behavior   smooth         If you wish to scroll until the end of the container El scrollTo  top  El scrollHeight  behavior   smooth      That s it   And here s a working snippet for the doubtful -  x000D   x000D  document getElementById  btn   addEventListener  click   e   gt      e preventDefault         smooth scroll   document getElementById  container   scrollTo  top  175  behavior   smooth         x000D     just some styling for you to ignore     scrollContainer     overflow-y  auto    max-height  100px    position  relative    border  1px solid red    width  120px     body     padding  10px      box     margin  5px    background-color  yellow    height  25px    display  flex    align-items  center    justify-content  center      goose     background-color  lime    x000D   lt  -- Dummy html to be ignored -- gt   lt div id  container  class  scrollContainer  gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div id  goose  class  box  gt goose lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt     lt div class  box  gt duck lt  div gt   lt  div gt    lt button id  btn  gt goose lt  button gt  x000D   x000D   x000D   Update  As you can perceive in the comments  it seems that Element scrollTo   is not supported in IE11  So if you don t care about IE11  you really shouldn t   feel free to use this in all your projects  Note that support exists for Edge  So you re not really leaving your Edge Windows users behind    Reference

User · Answer

To scroll an element into view of a div  only if needed  you can use this scrollIfNeeded function    x000D   x000D  function scrollIfNeeded element  container    x000D    if  element offsetTop  lt  container scrollTop    x000D      container scrollTop   element offsetTop  x000D      else   x000D      const offsetBottom   element offsetTop   element offsetHeight  x000D      const scrollBottom   container scrollTop   container offsetHeight  x000D      if  offsetBottom  gt  scrollBottom    x000D        container scrollTop   offsetBottom - container offsetHeight  x000D        x000D      x000D    x000D   x000D  document getElementById  btn   addEventListener  click   ev   gt    x000D    ev preventDefault    x000D    scrollIfNeeded document getElementById  goose    document getElementById  container     x000D      x000D   scrollContainer   x000D    overflow-y  auto  x000D    max-height  100px  x000D    position  relative  x000D    border  1px solid red  x000D    width  120px  x000D    x000D   x000D  body   x000D    padding  10px  x000D    x000D   x000D   box   x000D    margin  5px  x000D    background-color  yellow  x000D    height  25px  x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    x000D   x000D   goose   x000D    background-color  lime  x000D    x000D   lt div id  container  class  scrollContainer  gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div id  goose  class  box  gt goose lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D     lt div class  box  gt duck lt  div gt  x000D   lt  div gt  x000D   x000D   lt button id  btn  gt scroll to goose lt  button gt  x000D   x000D   x000D

User · Answer

This is what has finally served me      Set parent scroll to show element     param element  object  The HTML object to show     param parent  object  The HTML object where the element is shown     var scrollToView   function element  parent          Algorithm  Accumulate the height of the previous elements and add half the height of the parent     var offsetAccumulator   0      parent     parent       parent children   each function             if this    element                return false    brake each loop                   offsetAccumulator      this  innerHeight                parent scrollTop offsetAccumulator - parent innerHeight   2

User · Answer

There are two facts     1  Component scrollIntoView is not supported by safari   2  JS framework jQuery can do the job like this   parent    some parent div has css position    fixed       html  body      parent  animate  scrollTop    child  offset   top   duration

User · Answer

Another example of using jQuery and animate    var container       container    var element       element     container animate       scrollTop  container scrollTop   container scrollTop     element offset   top - container offset   top          duration  1000      specialEasing            width   linear           height   easeOutBounce             complete  function  e            console log  animation completed

User · Answer

given you have a div element you need to scroll inside  try this piece of code  document querySelector  div   scroll x y   this works with me inside a div with a scroll  this should work with you in case you pointed the mouse over this element and then tried to scroll down or up  If it manually works  it should work too

User · Answer

You would have to find the position of the element in the DIV you want to scroll to  and set the scrollTop property   divElem scrollTop   0    Update   Sample code to move up or down    function move up         document getElementById  divElem   scrollTop    10         function move down         document getElementById  divElem   scrollTop -  10

User · Answer

Code should be   var divElem   document getElementById  scrolling div    var chElem   document getElementById  element within div    var topPos   divElem offsetTop  divElem scrollTop   topPos - chElem offsetTop    You want to scroll the difference between child top position and div s top position    Get access to child elements using   var divElem   document getElementById  scrolling div     var numChildren   divElem childNodes length    and so on

User · Answer

If you are using jQuery  you could scroll with an animation using the following     MyContainerDiv  animate  scrollTop    MyContainerDiv  scrollTop         element within div   offset   top -   MyContainerDiv  offset   top       The animation is optional  you could also take the scrollTop value calculated above and put it directly in the container s scrollTop property

User · Answer

browser does scrolling automatically to an element that gets focus  so what you can also do it to wrap the element that you need to be scrolled to into  lt a gt     lt  a gt  and then when you need scroll just set the focus on that a

User · Answer

You need to get the top offset of the element you d like to scroll into view  relative to its parent  the scrolling div container    var myElement   document getElementById  element within div    var topPos   myElement offsetTop    The variable topPos is now set to the distance between the top of the scrolling div and the element you wish to have visible  in pixels    Now we tell the div to scroll to that position using scrollTop   document getElementById  scrolling div   scrollTop   topPos    If you re using the prototype JS framework  you d do the same thing like this   var posArray      element within div   positionedOffset       scrolling div   scrollTop   posArray 1     Again  this will scroll the div so that the element you wish to see is exactly at the top  or if that s not possible  scrolled as far down as it can so it s visible

User · Answer

User Animated Scrolling  Here s an example of how to programmatically scroll a  lt div gt  horizontally  without JQuery  To scroll vertically  you would replace JavaScript s writes to scrollLeft with scrollTop  instead   JSFiddle  https   jsfiddle net fNPvf 38536   HTML   lt  -- Left Button  -- gt   lt div style  float left   gt       lt  --  1  Whilst it s pressed  increment the scroll  When we release  clear the timer to stop recursive scroll calls  -- gt       lt input type  button  value      style  height  100px   onmousedown  scroll  scroller  3  10    onmouseup  clearTimeout TIMER SCROLL     gt   lt  div gt   lt  -- Contents to scroll  -- gt   lt div id  scroller  style  float  left  width  100px  height  100px  overflow  hidden   gt       lt  --  lt 3 -- gt       lt img src  https   cdn sstatic net Sites stackoverflow company img logos so so-logo png v 9c558ec15d8a  alt  image large  style  height  100px    gt   lt  div gt   lt  -- Right Button  -- gt   lt div style  float left   gt       lt  -- As  1    Use a negative value of  d  to decrease the scroll   -- gt       lt input type  button  value      style  height  100px   onmousedown  scroll  scroller  -3  10    onmouseup  clearTimeout TIMER SCROLL     gt   lt  div gt    JavaScript     Declare the Shared Timer  var TIMER SCROLL       Scroll function    param id  Unique id of element to scroll   param d   Amount of pixels to scroll per sleep   param del Size of the sleep  ms     function scroll id  d  del          Scroll the element      document getElementById id  scrollLeft    d         Perform a delay before recursing this function again      TIMER SCROLL   setTimeout  scroll    id      d      del       del        Credit to Dux     Auto Animated Scrolling  In addition  here are functions for scrolling a  lt div gt  fully to the left and right  The only thing we change here is we make a check to see if the full extension of the scroll has been utilised before making a recursive call to scroll again   JSFiddle  https   jsfiddle net 0nLc2fhh 1   HTML   lt  -- Left Button  -- gt   lt div style  float left   gt       lt  --  1  Whilst it s pressed  increment the scroll  When we release  clear the timer to stop recursive scroll calls  -- gt       lt input type  button  value      style  height  100px   onclick  scrollFullyLeft  scroller  3  10     gt   lt  div gt   lt  -- Contents to scroll  -- gt   lt div id  scroller  style  float  left  width  100px  height  100px  overflow  hidden   gt     lt  --  lt 3 -- gt     lt img src  https   cdn sstatic net Sites stackoverflow company img logos so so-logo png v 9c558ec15d8a  alt  image large  style  height  100px    gt   lt  div gt   lt  -- Right Button  -- gt   lt div style  float left   gt       lt  -- As  1    Use a negative value of  d  to decrease the scroll   -- gt       lt input type  button  value      style  height  100px   onclick  scrollFullyRight  scroller  3  10     gt   lt  div gt    JavaScript     Declare the Shared Timer  var TIMER SCROLL       Scroll fully left function  completely scrolls  a  lt div gt  to the left  as far as it will go   param id  Unique id of element to scroll   param d   Amount of pixels to scroll per sleep   param del Size of the sleep  ms     function scrollFullyLeft id  d  del          Fetch the element      var el   document getElementById id          Scroll the element      el scrollLeft    d         Have we not finished scrolling yet      if el scrollLeft  lt   el scrollWidth - el clientWidth             TIMER SCROLL   setTimeout  scrollFullyLeft    id      d      del       del                 Scroll fully right function  completely scrolls  a  lt div gt  to the right  as far as it will go   param id  Unique id of element to scroll   param d   Amount of pixels to scroll per sleep   param del Size of the sleep  ms     function scrollFullyRight id  d  del          Fetch the element      var el   document getElementById id          Scroll the element      el scrollLeft -  d         Have we not finished scrolling yet      if el scrollLeft  gt  0            TIMER SCROLL   setTimeout  scrollFullyRight    id      d      del       del

User · Answer

Method 1 -  Smooth scrolling to an element inside an element   x000D   x000D  var box   document querySelector   box    x000D      targetElm   document querySelector   boxChild        lt -- Scroll to here within   box  x000D   x000D  document querySelector  button   addEventListener  click   function    x000D     scrollToElm  box  targetElm   600       x000D      x000D   x000D   x000D                x000D   x000D  function scrollToElm container  elm  duration   x000D    var pos   getRelativePos elm   x000D    scrollTo  container  pos top   2       duration in seconds x000D    x000D   x000D  function getRelativePos elm   x000D    var pPos   elm parentNode getBoundingClientRect       parent pos x000D        cPos   elm getBoundingClientRect       target pos x000D        pos       x000D   x000D    pos top      cPos top    - pPos top   elm parentNode scrollTop  x000D    pos right    cPos right  - pPos right  x000D    pos bottom   cPos bottom - pPos bottom  x000D    pos left     cPos left   - pPos left  x000D   x000D    return pos  x000D    x000D       x000D  function scrollTo element  to  duration  onDone    x000D      var start   element scrollTop  x000D          change   to - start  x000D          startTime   performance now    x000D          val  now  elapsed  t  x000D   x000D      function animateScroll    x000D          now   performance now    x000D          elapsed    now - startTime  1000  x000D          t    elapsed duration   x000D   x000D          element scrollTop   start   change   easeInOutQuad t   x000D   x000D          if  t  lt  1   x000D              window requestAnimationFrame animateScroll   x000D          else x000D              onDone  amp  amp  onDone    x000D         x000D   x000D      animateScroll    x000D    x000D   x000D  function easeInOutQuad t   return t lt  5   2 t t   -1  4-2 t  t    x000D   box  width 80   border 2px dashed  height 180px  overflow auto    x000D   boxChild   x000D    margin 600px 0 300px   x000D    width  40px  x000D    height 40px  x000D    background green  x000D    x000D   lt button gt Scroll to element lt  button gt  x000D   lt div class  box  gt  x000D     lt div class  boxChild  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Method 2 - Using Element scrollIntoView      Note that browser support isn t great for this one    x000D   x000D  var targetElm   document querySelector   boxChild        reference to scroll target x000D      button   document querySelector  button              button that triggers the scroll x000D     x000D     bind  click  event to a button  x000D  button addEventListener  click   function    x000D     targetElm scrollIntoView   x000D     x000D   box   x000D    width  80   x000D    border  2px dashed  x000D    height  180px  x000D    overflow  auto  x000D    scroll-behavior  smooth      lt -- for smooth scroll    x000D    x000D   x000D   boxChild   x000D    margin  600px 0 300px  x000D    width  40px  x000D    height  40px  x000D    background  green  x000D    x000D   lt button gt Scroll to element lt  button gt  x000D   lt div class  box  gt  x000D     lt div class  boxChild  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Method 3 - Using CSS scroll-behavior    x000D   x000D   box   x000D    width  80   x000D    border  2px dashed  x000D    height  180px  x000D    overflow-y  scroll  x000D    scroll-behavior  smooth      lt ---    x000D    x000D   x000D   boxChild   x000D    margin  600px 0 300px  x000D    width  40px  x000D    height  40px  x000D    background  green  x000D    x000D   lt a href   boxChild  gt Scroll to element lt  a gt  x000D   lt div class  box  gt  x000D     lt div id  boxChild  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s a simple pure JavaScript solution that works for a target Number  value for scrollTop   target DOM element  or some special String cases          target - target to scroll to  DOM element  scrollTop Number   top   or  bottom     containerEl - DOM element for the container with scrollbars     var scrollToTarget   function target  containerEl           Moved up here for readability      var isElement   target  amp  amp  target nodeType     1          isNumber   Object prototype toString call target        object Number         if  isElement            containerEl scrollTop   target offsetTop        else if  isNumber            containerEl scrollTop   target        else if  target      bottom             containerEl scrollTop   containerEl scrollHeight - containerEl offsetHeight        else if  target      top             containerEl scrollTop   0             And here are some examples of usage      Scroll to the top var scrollableDiv   document getElementById  scrollable div    scrollToTarget  top   scrollableDiv     or     Scroll to 200px from the top var scrollableDiv   document getElementById  scrollable div    scrollToTarget 200  scrollableDiv     or     Scroll to targetElement var scrollableDiv   document getElementById  scrollable div    var targetElement  document getElementById  target element    scrollToTarget targetElement  scrollableDiv

[javascript] How to scroll to an element inside a div?

Examples related to javascript

Examples related to html

Examples related to scroll