jQuery scroll to element

Question

I have this input element    lt input type  text  class  textfield  value    id  subject  name  subject  gt    Then I have some other elements  like other text inputs  textareas  etc   When the user clicks on that input with  subject  the page should scroll to the last element of the page with a nice animation  It should be a scroll to bottom and not to top   The last item of the page is a submit button with  submit    lt input type  submit  class  submit  id  submit  name  submit  value  Ok  Done   gt    The animation should not be too fast and should be fluid   I am running the latest jQuery version  I prefer to not install any plugin but to use the default jQuery features to achieve this

User · Answer

This is the way I do it   document querySelector  scrollHere   scrollIntoView   behavior   smooth       Works in any browser   It can easily be wrapped into a function  function scrollTo selector        document querySelector selector  scrollIntoView   behavior   smooth         Here is a working example  x000D   x000D      btn   click function     x000D    document getElementById  scrollHere   scrollIntoView   behavior   smooth     x000D     x000D   btn  margin-bottom  500px   x000D   middle  display  block  margin-bottom  500px  color  red   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button class  btn  gt Scroll down lt  button gt  x000D   x000D   lt h1 class  middle  gt You see  lt  h1 gt  x000D   x000D   lt div id  scrollHere  gt Arrived at your destination lt  div gt  x000D   x000D   x000D    Docs

User · Answer

If you are only handling scrolling to an input element  you can use focus     For example  if you wanted to scroll to the first visible input       input visible   first   focus      Or the first visible input in an container with class  error       error  input visible   first   focus      Thanks to Tricia Ball for pointing this out

User · Answer

Using this simple script  if   window location hash  length  gt  0              html  body   animate   scrollTop    window location hash  offset   top   1000       Would make in sort that if a hash tag is found in the url  the scrollTo animate to the ID  If not hash tag found  then ignore the script

User · Answer

Assuming you have a button with the id button  try this example       button   click function            document documentElement  document body   animate           scrollTop      elementtoScrollToID   offset   top        2000         I got the code from the article Smoothly scroll to an element without a jQuery plugin  And I have tested it on the example below    x000D   x000D   lt html gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 1 5 1 jquery min js  gt  lt  script gt  x000D       lt script gt  x000D            document  ready function     x000D                  click   click function     x000D                     html  body   animate   x000D                      scrollTop      div1   offset   top x000D                     2000   x000D                  x000D              x000D       lt  script gt  x000D       lt div id  div1  style  height  1000px  width 100px  gt  x000D          Test x000D       lt  div gt  x000D       lt br  gt  x000D       lt div id  div2  style  height  1000px  width 100px  gt  x000D          Test 2 x000D       lt  div gt  x000D       lt button id  click  gt Click me lt  button gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is my approach abstracting the ID s and href s  using a generic class selector   x000D   x000D    function     x000D       Generic selector to be used anywhere x000D        js-scroll-to   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         500   x000D        x000D      x000D   lt  -- example of a fixed nav menu -- gt  x000D   lt ul class  nav  gt  x000D     lt li gt  x000D       lt a href   section-1  class  nav-item js-scroll-to  gt Item 1 lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   section-2  class  nav-item js-scroll-to  gt Item 2 lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   section-3  class  nav-item js-scroll-to  gt Item 3 lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

x000D   x000D  jQuery document  ready function      x000D       a href         bind  click smoothscroll  function  e    x000D      e preventDefault    x000D      var target   this hash  x000D           target     target   x000D   x000D         html  body   stop   animate    x000D         scrollTop    target offset   top-40 x000D         900   swing   function      x000D        window location hash   target  x000D           x000D         x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt ul role  tablist  gt  x000D     lt li class  active  id  p1  gt  lt a href   pane1  role  tab  gt Section 1 lt  a gt  lt  li gt  x000D     lt li id  p2  gt  lt a href   pane2  role  tab  gt Section 2 lt  a gt  lt  li gt  x000D     lt li id  p3  gt  lt a href   pane3  role  tab  gt Section 3 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   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   x000D   x000D

User · Answer

html  body   animate  scrollTop     Math min         to  offset   top-margintop    margintop is the margin above the target        body   0  scrollHeight-   body   height      if the target is at the bottom    2000

User · Answer

I know a way without jQuery  document getElementById  quot element-id quot   scrollIntoView     Edit  It s been two years and I m still randomly getting reputation from this post lmao Edit 2  Please don t edit my comment without asking me

User · Answer

x000D   x000D  jQuery document  ready function      x000D       a href         bind  click smoothscroll  function  e    x000D      e preventDefault    x000D      var target   this hash  x000D           target     target   x000D   x000D         html  body   stop   animate    x000D         scrollTop    target offset   top-40 x000D         900   swing   function      x000D        window location hash   target  x000D           x000D         x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt ul role  tablist  gt  x000D     lt li class  active  id  p1  gt  lt a href   pane1  role  tab  gt Section 1 lt  a gt  lt  li gt  x000D     lt li id  p2  gt  lt a href   pane2  role  tab  gt Section 2 lt  a gt  lt  li gt  x000D     lt li id  p3  gt  lt a href   pane3  role  tab  gt Section 3 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   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   x000D   x000D

User · Answer

A compact version of  animate  solution     fn scrollTo   function  speed        if  typeof speed       undefined           speed   1000          html  body   animate           scrollTop  parseInt   this  offset   top         speed        Basic usage      your element   scrollTo

User · Answer

If you want to scroll within an overflow container  instead of    html  body   answered above   working also with absolute positioning  this is the way to do    var elem       myElement        container       myScrollableContainer        pos   elem position   top   container scrollTop   - container position   top   container animate     scrollTop  pos

User · Answer

If you are not much interested in the smooth scroll effect and just interested in scrolling to a particular element  you don t require some jQuery function for this  Javascript has got your case covered   https   developer mozilla org en-US docs Web API element scrollIntoView  So all you need to do is     selector   get 0  scrollIntoView        get 0  is used because we want to retrieve the JavaScript s DOM element and not the JQuery s DOM element

User · Answer

I wrote a general purpose function that scrolls to either a jQuery object  a CSS selector  or a numeric value   Example usage      scroll to   target-element     scrollTo   target-element        scroll to 80 pixels above first element with class   invalid     scrollTo   invalid   -80       scroll a container with id   my-container  to 300 pixels from its top    scrollTo 300  0   slow     my-container      The function s code         Scrolls the container to the target position minus the offset      param target    - the destination to scroll to  can be a jQuery object                      jQuery selector  or numeric position    param offset    - the offset in pixels from the target position  e g                       pass -80 to scroll to 80 pixels above the target    param speed     - the scroll speed in milliseconds  or one of the                      strings  fast  or  slow   default  500    param container - a jQuery object or selector for the container to                      be scrolled  default   html  body     jQuery scrollTo   function  target  offset  speed  container         if  isNaN target              if    target instanceof jQuery               target     target            target   parseInt target offset   top              container   container     html  body       if    container instanceof jQuery           container     container        speed   speed    500      offset   offset    0       container animate           scrollTop  target   offset        speed

User · Answer

var scrollTo   function  parent   element        var topDiff    element position   top -  parent position   top        parent animate           scrollTop   topDiff        100

User · Answer

This is Atharva s answer from  https   developer mozilla org en-US docs Web API element scrollIntoView  Just wanted to add if your document is in an iframe  you can choose an element in the parent frame to scroll into view        element-in-parent-frame   window parent document  get 0  scrollIntoView

User · Answer

Easy way to achieve the scroll of page to target div id  var targetOffset       divID   offset   top     html  body   animate  scrollTop  targetOffset   1000

User · Answer

You just need     quot selector quot   get 0  scrollTo 0  0

User · Answer

jQuery  scrollTo     View - Demo  API  Source   I wrote this lightweight plugin to make page element scrolling much easier  It s flexible where you could pass in a target element or specified value  Perhaps this could be part of jQuery s next official release  what do you think     Examples Usage      body   scrollTo   target       Scroll screen to target element     body   scrollTo 500      Scroll screen 500 pixels down      scrollable   scrollTo 100      Scroll individual element 100 pixels down     Options   scrollTarget  A element  string  or number which indicates desired scroll position   offsetTop  A number that defines additional spacing above scroll target   duration  A string or number determining how long the animation will run   easing  A string indicating which easing function to use for the transition   complete  A function to call once the animation is complete

User · Answer

With this solution you do not need any plugin and there s no setup required besides placing the script before your closing  lt  body gt  tag     quot a href       quot   on  quot click quot   function e         quot html  body quot   animate       scrollTop      this  attr  quot href quot    offset   top      1000     return false       if    window location hash  length  gt  1         quot html  body quot   animate       scrollTop    window location hash  offset   top      1000      On load  if there is a hash in the address  we scroll to it  And - whenever you click an a link with an href hash e g   top  we scroll to it    Edit 2020 If you want a pure JavaScript solution  you could perhaps instead use something like  var  scrollToElement   function  selector      try       document querySelector selector  scrollIntoView   behavior   smooth          catch  e        console warn e          var  scrollToHashesInHrefs   function        document querySelectorAll  quot a href       quot   forEach function  el        el addEventListener  click   function  e           scrollToElement el getAttribute  href           return false                if  window location hash         scrollToElement window location hash           scrollToHashesInHrefs

User · Answer

In most cases  it would be best to use a plugin  Seriously  I m going to tout mine here  Of course there are others  too  But please check if they really avoid the pitfalls for which you d want a plugin in the first place - not all of them do   I have written about the reasons for using a plugin elsewhere  In a nutshell  the one liner underpinning most answers here      html  body   animate    scrollTop   target offset   top    duration      is bad UX    The animation doesn t respond to user actions  It carries on even if the user clicks  taps  or tries to scroll  If the starting point of the animation is close to the target element  the animation is painfully slow   If the target element is placed near the bottom of the page  it can t be scrolled to the top of the window  The scroll animation stops abruptly then  in mid motion    To handle these issues  and a bunch of others   you can use a plugin of mine  jQuery scrollable  The call then becomes     window   scrollTo  targetPosition      and that s it  Of course  there are more options   With regard to the target position   target offset   top does the job in most cases  But please be aware that the returned value doesn t take a border on the html element into account  see this demo   If you need the target position to be accurate under any circumstances  it is better to use  targetPosition      window   scrollTop      target 0  getBoundingClientRect   top    That works even if a border on the html element is set

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  In our case we don t scroll the full body  but just particular elements with overflow  auto  within a larger layout   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

User · Answer

I set up a module scroll-element npm install scroll-element  It works like this   import   scrollToElement  scrollWindowToElement   from  scroll-element      scroll the window to your target element  duration and offset optional    let targetElement   document getElementById  my-item   scrollWindowToElement targetElement      scroll the overflow container element to your target element  duration and offset optional    let containerElement   document getElementById  my-container   let targetElement   document getElementById  my-item   scrollToElement containerElement  targetElement    Written with help from the following SO posts    offset-top-of-an-element-without-jquery scrolltop-animation-without-jquery   Here is the code   export const scrollToElement   function containerElement  targetElement  duration  offset      if  duration    null    duration   1000     if  offset    null    offset   0      let targetOffsetTop   getElementOffset targetElement  top   let containerOffsetTop   getElementOffset containerElement  top   let scrollTarget   targetOffsetTop     containerElement scrollTop - containerOffsetTop    scrollTarget    offset   scroll containerElement  scrollTarget  duration     export const scrollWindowToElement   function targetElement  duration  offset      if  duration    null    duration   1000     if  offset    null    offset   0      let scrollTarget   getElementOffset targetElement  top   scrollTarget    offset   scrollWindow scrollTarget  duration     function scroll containerElement  scrollTarget  duration      let scrollStep   scrollTarget    duration   15    let interval   setInterval      gt        if   containerElement scrollTop  lt  scrollTarget           containerElement scrollTop    scrollStep       else         clearInterval interval            15     function scrollWindow scrollTarget  duration      let scrollStep   scrollTarget    duration   15    let interval   setInterval      gt        if   window scrollY  lt  scrollTarget           window scrollBy  0  scrollStep         else         clearInterval interval            15     function getElementOffset element      let de   document documentElement   let box   element getBoundingClientRect     let top   box top   window pageYOffset - de clientTop   let left   box left   window pageXOffset - de clientLeft   return   top  top  left  left

User · Answer

The solution by Steve and Peter works very well   But in some cases  you may have to convert the value to an integer  Strangely  the returned value from          offset   top is sometimes in float  Use  parseInt           offset   top   For example       button   click function            html  body   animate           scrollTop  parseInt     elementtoScrollToID   offset   top         2000

User · Answer

This worked for me   var targetOffset       elementToScrollTo   offset   top      DivParent   animate  scrollTop  targetOffset   2500

User · Answer

html  body   animate      does not for me on iphone  android chrome safari browser     I had to target root content element of the page          cotnent   animate        Here is what I have ended up with  if  navigator userAgent match   iPod iPhone iPad Android                          content   animate       scrollTop      elementtoScrollToID   offset   top        slow      else         html  body   animate       scrollTop      elementtoScrollToID   offset   top         slow        All body content wired up with a  content div   lt html gt        lt body gt   lt div id  content  gt        lt  div gt   lt  body gt   lt  html gt

User · Answer

Very simple and easy to use custom jQuery plugin  Just add the attribute scroll  to your clickable element and set its value to the selector you want to scroll to    Like so   lt a scroll   product  gt Click me lt  a gt   It can be used on any element     function           fn animateScroll   function            console log     scroll                  scroll    click function                selector       this  attr  scroll                 console log selector               console log selector offset   top                  html body   animate                   scrollTop   selector offset   top      -   window  scrollTop                   1000                                     jQuery       RUN jQuery document  ready function              animateScroll            IN HTML EXAMPLE    RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL   SELECTOR      lt a scroll   product  gt Click To Scroll lt  a gt

User · Answer

Animations      slide to top of the page     up   click function             html  body   animate           scrollTop  0        600       return false          slide page to anchor     menutop b   click function          event preventDefault           html  body   animate           scrollTop       this  attr  href     offset   top        600       return false          Scroll to class  div     button   click function            html  body   animate           scrollTop      target-element   offset   top        1000           div background animate   window  scroll function           var x     this  scrollTop            freezze div background         banner0   css  background-position    0px     x   px            from left to right         banner0   css  background-position   x  px     0px            from right to left         banner0   css  background-position   -x  px     0px            from bottom to top         skills   css  background-position    0px     -x    px            move background from top to bottom         skills1   css  background-position    0      parseInt -x   1     px       0      parseInt -x   1     px  center top            Show hide mtop menu       if   x  gt  100              menu    addClass   menushow              menu    fadeIn  slow             menu    animate  opacity  0 75   500         else            menu    removeClass   menushow              menu    animate  opacity  1   500                  progres bar animation simple     bar1   each function i      var width     this  data  width          this  animate   width    width          900  function           Animation complete

User · Answer

Updated answer as of 2019      body   animate       scrollTop      subject   offset   top -    body   offset   top      body   scrollTop       fast

User · Answer

To show the full element  if it s possible with the current window size    var element             some element    var elementHeight   element height    var windowHeight      window  height     var offset   Math min elementHeight  windowHeight    element offset   top     html  body   animate   scrollTop  offset    500

User · Answer

ONELINER  subject onclick   e  gt  window scroll   top  submit offsetTop  behavior   smooth        x000D   x000D  subject onclick   e  gt  window scroll  top  submit offsetTop  behavior   smooth     x000D   box  foot display  flex background  fdf padding 500px 0   foot padding 250px  x000D   lt input type  text  class  textfield  value  click here  id  subject  name  subject  gt  x000D   x000D   lt div class  box  gt  x000D    Some content x000D     lt textarea gt  lt  textarea gt  x000D   lt  div gt  x000D   x000D   lt input type  submit  class  submit  id  submit  name  submit  value  Ok  Done   gt  x000D   x000D   lt div class  foot  gt Some footer lt  div gt  x000D   x000D   x000D

User · Answer

After finding the way to get my code work  I think I should make thing a bit clear  For using     html  body   animate      scrollTop     quot  div1 quot   offset   top    2000    you need to be on top of the page since    quot  div1 quot   offset   top will return different numbers for different positions you scroll to  If you already scrolled out of the top  you need to specify the exact pageY value  see pageY definition here  https   javascript info coordinates   So now  the problem is to calculate the pageY value of one element  Below is an example in case the scroll container is the body  function getPageY id        let elem   document getElementById id       let box   elem getBoundingClientRect        var body   document getElementsByTagName  quot BODY quot   0       return box top   body scrollTop     for window scroll  box top   window scrollY     The above function returns the same number even if you scrolled somewhere  Now  to scroll back to that element     quot html  body quot   animate   scrollTop  getPageY  div1       quot slow quot

User · Answer

When the user clicks on that input with  subject  the page should   scroll to the last element of the page with a nice animation  It   should be a scroll to bottom and not to top       The last item of the page is a submit button with  submit       subject   click function             submit   focus            subject   focus          This will first scroll down to  submit then restore the cursor back to the input that was clicked  which mimics a scroll down  and works on most browsers  It also doesn t require jQuery as it can be written in pure JavaScript   Can this fashion of using focus function mimic animation in a better way  through chaining focus calls  I haven t tested this theory  but it would look something like this    lt style gt     F  gt            width  100        lt  style gt    lt form id  F   gt     lt div id  child 1  gt      lt  div gt     lt div id  child 2  gt      lt  div gt          lt div id  child K  gt      lt  div gt   lt  form gt    lt script gt        child N   click function               child N   focus            child N 1   focus                   child K   focus             child N   focus           lt  script gt

[javascript] jQuery scroll to element

Examples related to javascript

Examples related to jquery

Examples related to scroll