How do I scroll to an element using JavaScript

Question

I am trying to move the page to a  lt div gt  element   I have tried the next code to no avail   document getElementById  divFirst   style visibility    visible   document getElementById  divFirst   style display    block

User · Answer

your question and the answers looks different. I don't know if I am mistaken, but for those who googles and reach here my answer would be the following:

My Answer explained:

here is a simple javascript for that

call this when you need to scroll the screen to an element which has id="yourSpecificElementId"

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

ie. for the above question, if the intention is to scroll the screen to the div with id 'divFirst'

the code would be: window.scroll(0,findPos(document.getElementById("divFirst")));

and you need this function for the working:

//Finds y value of given object
function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

the screen will be scrolled to your specific element.

User · Answer

Try this   var divFirst   document getElementById  divFirst    divFirst style visibility    visible    divFirst style display    block     divFirst tabIndex    -1     divFirst focus      e g         http   jsfiddle net Vgrey

User · Answer

After looking around a lot  this is what finally worked for me    Find locate div in your dom which has scroll bar  For me  it looked like this     div class  table body table body div  scroll top  0  scroll left  0  style  width  1263px  height  499px   I located it with this xpath     div  class  table body table body div   Used JavaScript to execute scrolling like this    JavascriptExecutor  driver  executeScript  arguments 0  scrollLeft   arguments 1    element 2000     2000 is the no of pixels I wanted to scroll towards the right  Use scrollTop instead of scrollLeft if you want to scroll your div down   Note   I tried using scrollIntoView but it didn t work properly because my webpage had multiple divs  It will work if you have only one main window where focus lies  This is the best solution I have come across if you don t want to use jQuery which I didn t want to

User · Answer

The best  shortest answer that what works even with animation effects   var scrollDiv   document getElementById  myDiv   offsetTop  window scrollTo   top  scrollDiv  behavior   smooth       If you have a fixed nav bar  just subtract its height from top value  so if your fixed bar height is 70px  line 2 will look like   window scrollTo   top  scrollDiv-70  behavior   smooth       Explanation   Line 1 gets the element position Line 2 scroll to element position  behavior property adds a smooth animated effect

User · Answer

scrollIntoView works well  document getElementById  quot divFirst quot   scrollIntoView     full reference in the MDN docs  https   developer mozilla org en-US docs Web API Element scrollIntoView

User · Answer

We can implement by 3 Methods  Note   quot automatic-scroll quot    gt  The particular element  quot scrollable-div quot    gt  The scrollable area div Method 1  document querySelector   automatic-scroll   scrollIntoView        behavior   smooth       Method 2  location href    quot  automatic-scroll quot    Method 3      scrollable-div   animate      scrollTop      automatic-scroll   offset   top -     scrollable-div   offset   top           scrollable-div   scrollTop       Important notice  method 1  amp  method 2 will be useful if the scrollable area height is  quot auto quot   Method 3 is useful if we using the scrollable area height like  quot calc 100vh - 200px  quot

User · Answer

You can use an anchor to  focus  the div  I e    lt div id  myDiv  gt  lt  div gt    and then use the following javascript      the next line is required to work around a bug in WebKit  Chrome   Safari  location href        location href     myDiv

User · Answer

In case you want to use html  you could just use this   a href  samplewebsite com subdivision html id   and make it an html link to the specific element id  Its basically getElementById html version

User · Answer

Similar to  caveman s solution  const element   document getElementById  theelementsid     if  element        window scroll           top  element scrollTop          behavior   smooth

User · Answer

Here s a function that can include an optional offset for those fixed headers  No external libraries needed    function scrollIntoView selector  offset   0      window scroll 0  document querySelector selector  offsetTop - offset       You can grab the height of an element using JQuery and scroll to it    var headerHeight       navbar-fixed-top   height    scrollIntoView   some-element   headerHeight    Update March 2018  Scroll to this answer without using JQuery  scrollIntoView   answer-44786637   document querySelector   top-bar   offsetHeight

User · Answer

I think that if you add a tabindex to your div  it will be able to get focus    lt div class  divFirst  tabindex  -1  gt   lt  div gt    I don t think it s valid though  tabindex can be applied only to a  area  button  input  object  select  and textarea  But give it a try

User · Answer

Focus can be set on interactive elements only    Div only represent a logical section of the page   Perhaps you can set the borders around div or change it s color to simulate a focus  And yes Visiblity is not focus

User · Answer

You can set focus to element  It works better than scrollIntoView  node setAttribute  tabindex    -1    node focus    node removeAttribute  tabindex

User · Answer

To scroll to a given element  just made this javascript only solution below   Simple usage   EPPZScrollTo scrollVerticalToElementById  signup form   20     Engine object  you can fiddle with filter  fps values              Created by Borb  s Geri on 12 17 13    Copyright  c  2013 eppz  development  LLC        Permission is hereby granted  free of charge  to any person obtaining a copy of this software and associated documentation files  the  Software    to deal in the Software without restriction  including without limitation the rights to use  copy  modify  merge  publish  distribute  sublicense  and or sell copies of the Software  and to permit persons to whom the Software is furnished to do so  subject to the following conditions     The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software     THE SOFTWARE IS PROVIDED  AS IS   WITHOUT WARRANTY OF ANY KIND  EXPRESS OR IMPLIED  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT  IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM  DAMAGES OR OTHER LIABILITY  WHETHER IN AN ACTION OF CONTRACT  TORT OR OTHERWISE  ARISING FROM  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE           var EPPZScrollTo                    Helpers              documentVerticalScrollPosition  function                 if  self pageYOffset  return self pageYOffset     Firefox  Chrome  Opera  Safari          if  document documentElement  amp  amp  document documentElement scrollTop  return document documentElement scrollTop     Internet Explorer 6  standards mode           if  document body scrollTop  return document body scrollTop     Internet Explorer 6  7 and 8          return 0     None of the above              viewportHeight  function         return  document compatMode      CSS1Compat     document documentElement clientHeight   document body clientHeight          documentHeight  function         return  document height     undefined    document height   document body offsetHeight          documentMaximumScrollPosition  function         return this documentHeight   - this viewportHeight            elementVerticalClientPositionById  function id                var element   document getElementById id           var rectangle   element getBoundingClientRect            return rectangle top                         Animation tick              scrollVerticalTickToPosition  function currentPosition  targetPosition                var filter   0 2          var fps   60          var difference   parseFloat targetPosition  - parseFloat currentPosition               Snap  then stop if arrived          var arrived    Math abs difference   lt   0 5           if  arrived                           Apply target              scrollTo 0 0  targetPosition               return                        Filtered position          currentPosition    parseFloat currentPosition     1 0 - filter      parseFloat targetPosition    filter               Apply target          scrollTo 0 0  Math round currentPosition                Schedule next tick          setTimeout  EPPZScrollTo scrollVerticalTickToPosition   currentPosition      targetPosition       1000   fps                           For public use                 param id The id of the element to scroll to          param padding Top padding to apply above element              scrollVerticalToElementById  function id  padding                var element   document getElementById id           if  element    null                        console warn  Cannot find element with id     id                     return                     var targetPosition   this documentVerticalScrollPosition     this elementVerticalClientPositionById id  - padding          var currentPosition   this documentVerticalScrollPosition                Clamp          var maximumScrollPosition   this documentMaximumScrollPosition            if  targetPosition  gt  maximumScrollPosition  targetPosition   maximumScrollPosition              Start animation          this scrollVerticalTickToPosition currentPosition  targetPosition

User · Answer

A method i often use to scroll a container to its contents        param  HTMLElement  container   element scrolled   param  HTMLElement  target   element where to scroll   param  number   offset    scroll back by offset    var scrollAt function container target offset       if container contains target            var ofs  0 0           var tmp target          while  tmp   container                ofs 0   tmp offsetWidth              ofs 1   tmp offsetHeight              tmp tmp parentNode                    container scrollTop   Math max 0 ofs 1 - typeof offset     number  offset 0         else          throw  scrollAt Error  target not found in container               if your whish to override globally  you could also do    HTMLElement prototype scrollAt function target offset       if this contains target            var ofs  0 0           var tmp target          while  tmp   this                ofs 0   tmp offsetWidth              ofs 1   tmp offsetHeight              tmp tmp parentNode                    container scrollTop   Math max 0 ofs 1 - typeof offset     number  offset 0         else          throw  scrollAt Error  target not found in container

User · Answer

You can t focus on a div  You can only focus on an input element in that div  Also  you need to use element focus   instead of display

User · Answer

try this function   function navigate divId     j  html  body   animate   scrollTop   j     divId  offset   top    1500       Pass the div id as parameter it will work I am using it already

User · Answer

For Chrome and Firefox  I ve been looking a bit into this and I figured this one out which somehow feels like the most natural way to do it  Of course  this is my personal favorite scroll now      const y   element getBoundingClientRect   top   window scrollY  window scroll     top  y    behavior   smooth        For IE  Edge and Safari supporters  Note that window scroll      options    is not supported on IE  Edge and Safari  In that case it s most likely best to use element scrollIntoView     Supported on IE 6   You can most likely  read  untested  pass in options without any side effects   These can of course be wrapped in a function that behaves according to which browser is being used

User · Answer

Due to behavior  smooth  doesn t work in Safari  Safari ios  Explorer  I usually write a simple function utilizing requestAnimationFrame   function        var start      var startPos   0         Navigation scroll page to element     function scrollTo timestamp  targetTop         if  start  start   timestamp       var runtime   timestamp - start       var progress   Math min runtime   700  1         window scroll 0  startPos    targetTop   progress           if progress  gt   1           return         else           requestAnimationFrame function timestamp               scrollTo timestamp  targetTop                              navElement addEventListener  click   function e        var target   e target    or this      var targetTop     target  getBoundingClientRect   top     startPos   window scrollY      requestAnimationFrame function timestamp           scrollTo timestamp  targetTop

[javascript] How do I scroll to an element using JavaScript?

Examples related to javascript

Examples related to html