scrollIntoView Scrolls just too far

Question

I have a page where a scroll bar containing table rows with divs in them is dynamically generated from the database  Each table row acts like a link  sort of like you d see on a YouTube playlist next to the video player   When a user visits the page  the option they are on is supposed to go to the top of the scrolling div  This functionality is working  The issue is that it goes just a tad too far  Like the option they are on is about 10px too high  So  the page is visited  the url is used to identify which option was selected and then scrolls that option to the top of the scrolling div  Note  This is not the scroll bar for the window  it is a div with a scrollbar   I am using this code to make it move the selected option to the top of the div   var pathArray   window location pathname split          var el   document getElementById pathArray 5     el scrollIntoView true     It moves it to the top of the div but about 10 pixels too far up  Anyone know how to fix that

User · Answer

Position Anchor By Absolute Method

Another way do do this is to position your anchors exactly where you want on the page rather than relying on scrolling by offset. I find it allows better control for each element (eg. if you want a different offset for certain elements), and may also be more resistant to browser API changes/differences.

<div id="title-element" style="position: relative;">
  <div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>

Now the offset is specified as -100px relative to the element. Create a function to create this anchor for code reuse, or if you are using a modern JS framework such as React do this by creating a component that renders your anchor, and pass in the anchor name and alignment for each element, which may or may not be the same.

Then just use :

const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });

For smooth scrolling with an offset of 100px.

User · Answer

Assuming you want to scroll to the divs that are all at the same level in DOM and have class name  scroll-with-offset   then this CSS will solve the issue    scroll-with-offset         padding-top  100px    margin-bottom  -100px      The offset from the top of the page is 100px  It will only work as intended with block   start     element scrollIntoView   behavior   smooth   block   start        What s happening is that the divs  top point is at the normal location but their inner contents start 100px below the normal location  That s what padding-top 100px is for  margin-bottom  -100px is to offset the below div s extra margin  To make the solution complete also add this CSS to offset the margins paddings for the top-most and bottom-most divs    top-div     padding-top  0     bottom-div     margin-bottom  0

User · Answer

Smoothly scroll to a proper position Get correct y coordinate and use window scrollTo  top  y  behavior   smooth    const id    profilePhoto   const yOffset   -10   const element   document getElementById id   const y   element getBoundingClientRect   top   window pageYOffset   yOffset   window scrollTo  top  y  behavior   smooth

User · Answer

You can do it in two steps    el scrollIntoView true   window scrollBy 0  -10      Adjust scrolling with a negative value here

User · Answer

Based on the answer of Arseniy-II  I had the Use-Case where the scrolling entity was not window itself but a inner Template  in this case a div   In this scenario we need to set an ID for the scrolling container and get it via getElementById to use its scrolling function    lt div class  scroll-container  id  app-content  gt         lt  div gt    const yOffsetForScroll   -100 const y   document getElementById this idToScroll  getBoundingClientRect   top  const main   document getElementById  app-content    main scrollTo       top  y   main scrollTop   yOffsetForScroll      behavior   smooth          Leaving it here in case someone faces a similar situation

User · Answer

If it s about 10px  then I guess you could simply manually adjust the containing div s scroll offset like that   el scrollIntoView true   document getElementById  containingDiv   scrollTop -  10

User · Answer

I add this css tips for those who not resolved this issue with solutions above      myDiv  before     display  block    content         margin-top  -90px     adjust this with your header height   height  90px     adjust this with your header height   visibility  hidden

User · Answer

Found a workaround solution  Say that you want to scroll to an div  Element here for example  and you want to have a spacing of 20px above it  Set the ref to a created div above it     lt div ref  yourRef  style   position   relative   bottom  20    gt   lt Element   gt   Doing so will create this spacing that you want   If you have a header  create an empty div as well behind the header and assign to it a height equal to the height of the header and reference it

User · Answer

This works for me in Chrome  With smooth scrolling and no timing hacks   It just moves the element  initiates the scroll  then moves it back   There is no visible  popping  if the element is already on the screen   pos   targetEle style position  top   targetEle style top  targetEle style position    relative   targetEle style top    -20px   targetEle scrollIntoView  behavior   smooth   block   start     targetEle style top   top  targetEle style position   pos

User · Answer

Simple solution for scrolling specific element down  const element   document getElementById  element-with-scroll    element scrollTop   element scrollHeight - 10

User · Answer

UPD  I ve created an npm package that works better than the following solution and easier to use   My smoothScroll function  I ve taken the wonderful solution of Steve Banton and wrote a function that makes it more convenient to use  It d be easier just to use window scroll   or even window scrollBy    as I ve tried before  but these two have some problems      Everything becomes junky after using them with a smooth behavior on  You can t prevent them anyhow and have to wait till the and of the scroll  So I hope my function will be useful for you  Also  there is a lightweight polyfill that makes it work in Safari and even IE      Here is the code  Just copy it and mess up with it how ever you want   import smoothscroll from  smoothscroll-polyfill    smoothscroll polyfill     const prepareSmoothScroll   linkEl   gt      const EXTRA OFFSET   0     const destinationEl   document getElementById linkEl dataset smoothScrollTo     const blockOption   linkEl dataset smoothScrollBlock     start      if   blockOption      start     blockOption      end    amp  amp  EXTRA OFFSET        const anchorEl   document createElement  div         destinationEl setAttribute  style    position  relative         anchorEl setAttribute  style    position  absolute  top  -  EXTRA OFFSET px  left  0          destinationEl appendChild anchorEl        linkEl addEventListener  click        gt          anchorEl scrollIntoView           block  blockOption          behavior   smooth                            if  blockOption      center      EXTRA OFFSET        linkEl addEventListener  click        gt          destinationEl scrollIntoView           block  blockOption          behavior   smooth                             export const activateSmoothScroll        gt      const linkEls       document querySelectorAll   data-smooth-scroll-to         linkEls forEach linkEl   gt  prepareSmoothScroll linkEl         To make a link element just add the following data attribute   data-smooth-scroll-to  element-id    Also you can set another attribute as an addtion  data-smooth-scroll-block  center    It represents the block option of the scrollIntoView   function  By default  it s start  Read more on MDN   Finally  Adjust the smoothScroll function to your needs   For example  if you have some fixed header  or I call it with the word masthead  you can do something like this   const mastheadEl   document querySelector someMastheadSelector       and add it s height to the EXTRA OFFSET variable  const EXTRA OFFSET   mastheadEl offsetHeight - 3    If you don t have such a case  then just delete it  why not  -D

User · Answer

You can also use the element scrollIntoView   options  el scrollIntoView           behavior   smooth        block   start             which most browsers support

User · Answer

Here s my 2 cents   I ve also had the issue of the scrollIntoView scrolling a bit past the element  so I created a script  native javascript  that prepends an element to the destination  positioned it a bit to the top with css and scrolled to that one  After scrolling  I remove the created elements again   HTML     anchor tag that appears multiple times on the page  lt a href     class  anchors  link js-anchor  data-target  schedule  gt       lt div class  anchors  text  gt          Scroll to the schedule      lt  div gt   lt  a gt     The node we want to scroll to  somewhere on the page  lt div id  schedule  gt        html  lt  div gt    Javascript file         gt         use strict        const anchors   document querySelectorAll   js-anchor           if there are no anchors found  don t run the script     if   anchors    anchors length  lt   0  return       anchors forEach anchor   gt              get the target from the data attribute         const target   anchor dataset target             search for the destination element to scroll to         const destination   document querySelector     target               if the destination element does not exist  don t run the rest of the code         if   destination  return           anchor addEventListener  click    e    gt                e preventDefault                  create a new element and add the  anchors  generated  class to it             const generatedAnchor   document createElement  div                generatedAnchor classList add  anchors  generated                   get the first child of the destination element  insert the generated element before it   so the scrollIntoView function scrolls to the top of the element instead of the bottom              const firstChild   destination firstChild              destination insertBefore generatedAnchor  firstChild                  finally fire the scrollIntoView function and make it animate  smoothly              generatedAnchor scrollIntoView                   behavior   smooth                   block   start                   inline   start                                 remove the generated element after 1ms  We need the timeout so the scrollIntoView function has something to scroll to              setTimeout      gt                    destination removeChild generatedAnchor                  1                             CSS    anchors  generated       position  relative      top  -100px      Hope this helps anyone

User · Answer

For an element in a table row  use JQuery to get the row above the one you want  and simply scroll to that row instead   Suppose I have multiple rows in a table  some of which should be reviewed by and admin   Each row requiring review has both and up and a down arrow to take you to the previous or next item for review   Here s a complete example that should just run if you make a new HTML document in notepad and save it   There s extra code to detect the top and bottom of our items for review so we don t throw any errors    lt html gt   lt head gt       lt title gt Scrolling Into View lt  title gt       lt script src  https   code jquery com jquery-3 5 1 slim min js  gt  lt  script gt       lt style gt          div scroll   height  6em  width  20em  overflow  auto            thead th     position  sticky  top  -1px  background   fff             up   down   cursor  pointer             up hover   down hover   color  blue  text-decoration underline         lt  style gt   lt  head gt   lt body gt   lt div class  scroll  gt   lt table border  1  gt       lt thead gt           lt tr gt               lt th gt Review lt  th gt               lt th gt Data lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr id  row 1  gt               lt th gt  lt  th gt               lt td gt Row 1  OK  lt  td gt           lt  tr gt           lt tr id  row 2  gt               lt th gt  lt  th gt               lt td gt Row 2  OK  lt  td gt           lt  tr gt           lt tr id  row 3  gt               lt th id  jump 1  gt  lt span class  up  gt UP lt  span gt   lt span class  down  gt DN lt  span gt  lt  th gt               lt td gt Row 3  REVIEW  lt  td gt           lt  tr gt           lt tr id  row 4  gt               lt th gt  lt  th gt               lt td gt Row 4  OK  lt  td gt           lt  tr gt           lt tr id  row 5  gt               lt th id  jump 2  gt  lt span class  up  gt UP lt  span gt   lt span class  down  gt DN lt  span gt  lt  th gt               lt td gt Row 5  REVIEW  lt  td gt           lt  tr gt           lt tr id  row 6  gt               lt th gt  lt  th gt               lt td gt Row 6  OK  lt  td gt           lt  tr gt           lt tr id  row 7  gt               lt th gt  lt  th gt               lt td gt Row 7  OK  lt  td gt           lt  tr gt           lt tr id  row 8  gt               lt th id  jump 3  gt  lt span class  up  gt UP lt  span gt   lt span class  down  gt DN lt  span gt  lt  th gt               lt td gt Row 8  REVIEW  lt  td gt           lt  tr gt           lt tr id  row 9  gt               lt th gt  lt  th gt               lt td gt Row 9  OK  lt  td gt           lt  tr gt           lt tr id  row 10  gt               lt th gt  lt  th gt               lt td gt Row 10  OK  lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt   lt  div gt   lt script gt    document  ready  function             up   on  click   function             var id   parseInt   this  parent   attr  id   split      1            if  id gt 1                var row id       jump      id - 1   parent   attr  id   split      1               document getElementById  row      row id-1   scrollIntoView  behavior   smooth   block   start               else               alert  At first                               down   on  click   function             var id   parseInt   this  parent   attr  id   split      1            if      jump      id   1   length                var row id       jump      id   1   parent   attr  id   split      1               document getElementById  row      row id-1   scrollIntoView  behavior   smooth   block   start               else               alert  At last                           lt  script gt   lt  body gt   lt  html gt

User · Answer

So  perhaps this is a bit clunky but so far so good  Im working in angular 9   file  ts  scroll el  HTMLElement      el scrollIntoView   block   start    behavior   smooth             file  html   lt button  click   scroll target   gt  lt  button gt   lt div   target style  margin-top -50px padding-top  50px    gt  lt  div gt    I adjust the offset with margin and padding top   Saludos

User · Answer

Building on an earlier answer  I am doing this in an Angular5 project   Started with      el scrollIntoView true   el scrollIntoView      behavior   smooth      block   start      window scrollBy 0  -10      But this gave some problems and needed to setTimeout for the scrollBy   like this     window scrollBy 0 -10   setTimeout      gt      window scrollBy 0 -10       500     And it works perfectly in MSIE11 and Chrome 68    I have not tested in FF   500ms was the shortest delay I would venture   Going lower sometimes failed as the smooth scroll had not yet completed   Adjust as required for your own project    1 to Fred727  for this simple but effective solution

User · Answer

My main idea is creating a tempDiv above the view which we want to scroll to  It work well without lagging in my project   scrollToView    element  offset    gt        var rect   element getBoundingClientRect        var targetY   rect y   window scrollY - offset       var tempDiv      tempDiv   document getElementById  tempDiv        if  tempDiv            tempDiv style top   targetY    px         else           tempDiv   document createElement  div            tempDiv id    tempDiv           tempDiv style background     F00           tempDiv style width    10px           tempDiv style height    10px           tempDiv style position    absolute           tempDiv style top   targetY    px           document body appendChild tempDiv              tempDiv scrollIntoView   behavior   smooth   block   start          Example using  onContactUsClick        gt        this scrollToView document getElementById  contact-us    48       Hope it help

User · Answer

Another solution is to use  offsetTop   like this   var elementPosition   document getElementById  id   offsetTop   window scrollTo     top  elementPosition - 10    add your necessary value   behavior   smooth     Smooth transition to roll

User · Answer

Fix it in 20 seconds  This solution belongs to  Arseniy-II  I have just simplified it into a function  function  scrollTo selector  yOffset   0     const el   document querySelector selector     const y   el getBoundingClientRect   top   window pageYOffset   yOffset     window scrollTo  top  y  behavior   smooth        Usage  you can open up the console right here in StackOverflow and test it out    scrollTo   question-header   0    I m currently using this in production and it is working just fine

User · Answer

I ve got this and it works brilliantly for me      add a smooth scroll to element scroll el    el scrollIntoView     behavior   smooth     block   start      setTimeout      gt    window scrollBy 0  -40      500      Hope it helps

User · Answer

Solution if you are using Ionic Capacitor  Angular Material  and need to support iOS 11                  document activeElement parentElement parentElement scrollIntoView  block   center   behavior   smooth       The key is to scroll to the parent of the parent which is the wrapper around the input   This wrapper includes the label for the input which is now no longer cut off  If you only need to support iOS 14 the  quot block quot  center param actually works  so this is sufficient                  document activeElement scrollIntoView  block   center   behavior   smooth

User · Answer

I solved this problem by using   element scrollIntoView   behavior   smooth   block   center        This makes the element appear in the center after scrolling  so I don t have to calculate yOffset   Hope it helps

[javascript] scrollIntoView Scrolls just too far

Position Anchor By Absolute Method

Examples related to javascript

Examples related to dom

Examples related to scroll