smooth scroll to top

Question

I ve bean searching for this for a few hours now and I have no solution  I want a smooth scroll to the top of the page  I already have smooth scrolling to separate anchors in the page with a  js file attatched to my site but I cannot use an anchor for the top  because I m using a template from a free hosting site with built in page building tools that do not allow me to edit above the body area   Here s where I got the smooth scrolling  I ve been trying to set up  smoothly-scroll-to-an-element-without-a-jquery-plugin  but I have no idea how to arrange it obviously after countless attempts  I ve also used window scrollTo 0  0   but it scrolls instantly  Thanks   In addition  http   jsfiddle net WFd3V  - the code would probably be the  tag class  smoothScroll  since my other element uses that  but I don t know how to mix it with the href  javascript window scrollTo 0 0      or anything else that would bring the page to the top without an anchor

User · Answer

theMaxx answer works in nuxt vue  smooth scrolling is default behavior   lt button  click scrollToTop   gt Jump to top of page    methods        scrollToTop           window scrollTo   top  0

User · Answer

You should start using jQuery or some other js lib   It s way easier than js  and you can use it as a shorthand for most js instead of actually long  drawn out js   Simply put  lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt   or whatever the latest google cdn is https   developers google com speed libraries devguide jquery  in your  lt head gt    Then  inside your event code  much easier if you use jQuery    click   for buttons    change   for checkboxes  selects  radios      put the code from your second link looking more like       theIDofTheButtonThatTriggersThisAnimation   click function            theIDofTheElementYouWantToSmoothlyScroll   animate           scrollTop  0        2000         However  if you re trying to do animations  I recommend you look into some basic css properties like position absolute and position relative to keep from going crazy     I m still not quite sure what s going on in your code because it s very non-standard relative to how things are done now with css  amp  jQuery   I d break it down into something simple to learn the general concept   For your example  you should build off of my animation example  how I learned  https   stackoverflow com a 12906254 1382306  I think you re trying to move your text up and down based upon a   click     In the fiddle in my answer  it slides left and right   You can easily reformat up and down by using the css top property instead of left   Once you figure out how to move the entire div up and down  you can make a relative container to hold all of the content absolute divs and manipulate all content divs with a loop by setting their tops   Here s a quick primer on absolute in relative  http   css-tricks com absolute-positioning-inside-relative-positioning   All of my animations have relative containers and absolute content   It s how I made a custom gridview plugin that can instantly zip through an entire database   Also  there really is no overuse of divs when it comes to animating   Trying to make 1 div do everything is a nightmare   Try to see if you can reformat my fiddle into a vertical slide out   Once you ve done that  research absolute in relative a little   If you have any more problems  just ask another question   Change your thinking to these philosophies  and you ll start flying through this type of coding

User · Answer

Here is my proposal implemented with ES6  const scrollToTop        gt      const c   document documentElement scrollTop    document body scrollTop    if  c  gt  0        window requestAnimationFrame scrollToTop       window scrollTo 0  c - c   8          scrollToTop      Tip  for slower motion of the scrolling  increase the hardcoded number 8  The bigger the number - the smoother slower the scrolling

User · Answer

I think the simplest solution is   window scrollTo  top  0  behavior   smooth       If you wanted instant scrolling then just use   window scrollTo  top  0      Can be used as a function      Scroll To Top  function scrollToTop      window scrollTo  top  0  behavior   smooth          Or as an onclick handler    lt button onclick  window scrollTo  top  0  behavior   smooth      gt Scroll to Top lt  button gt

User · Answer

You can simply use   x000D   x000D     When the user scrolls down 20px from the top of the document  show the button x000D  window onscroll   function    scrollFunction     x000D   x000D  function scrollFunction     x000D      if  document body scrollTop  gt  20    document documentElement scrollTop  gt  20    x000D          document getElementById  gotoTop   style display    block   x000D        else   x000D          document getElementById  gotoTop   style display    none   x000D        x000D      x000D    x000D   x000D     When the user clicks on the button  scroll to the top of the document x000D  function topFunction     x000D    x000D          html  body   animate  scrollTop 0    slow    x000D    x000D  body   x000D    font-family  Arial  Helvetica  sans-serif  x000D    font-size  20px  x000D    x000D   x000D   gotoTop   x000D    display  none  x000D    position  fixed  x000D    bottom  20px  x000D    right  30px  x000D    z-index  99  x000D    font-size  18px  x000D    border  none  x000D    outline  none  x000D    background-color  red  x000D    color  white  x000D    cursor  pointer  x000D    padding  15px  x000D    border-radius  4px  x000D    x000D   x000D   gotoTop hover   x000D    background-color   555  x000D    x000D   lt script src  https   code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D   x000D   lt button onclick  topFunction    id  gotoTop  title  Go to top  gt Top lt  button gt  x000D   x000D   lt div style  background-color black color white padding 30px  gt Scroll Down lt  div gt  x000D   lt div style  background-color lightgrey padding 30px 30px 2500px  gt This example demonstrates how to create a  scroll to top  button that becomes visible when the user starts to scroll the page  lt  div gt  x000D   x000D   x000D

User · Answer

Some time has passed since this was asked    Now it is possible to not only specify number to window scroll function  but also pass an object with three properties  top  left and behavior  So if we would like to have a smooth scroll up with native JavaScript  we can now do something like this   let button   document querySelector  button-id    let options    top  0  left  0  behavior   smooth       left and top are coordinates button addEventListener  click        gt    window scroll options        https   developer mozilla org en-US docs Web API Window scroll

User · Answer

Elegant easy solution using jQuery    lt script gt      function call             var body      html  body            body stop   animate  scrollTop 0   500   swing   function                        lt  script gt    and in your html    lt div onclick  call    gt  lt img src     img arrow-up 2x png  gt  lt  div gt

User · Answer

Came up with this solution  function scrollToTop     let currentOffset   window pageYOffset  const arr        for  let i   100  i  gt   0  i--        arr push new Promise res   gt                setTimeout      gt                        res currentOffset    i   100                                       2    100 - i                        arr reduce  acc  curr  index  arr    gt        return acc then  res    gt            if  typeof res      number               window scrollTo 0  res          return curr           Promise resolve currentOffset   then      gt        window scrollTo 0  0

User · Answer

I just customized BootPc Deutschland s answer  You can simply use   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt   lt script gt        document  ready function               body html   animate               scrollTop  0            800           btn-go-to-top   click function                 body html   animate               scrollTop  0            800           return false                lt  script gt    this will help you to smoothly scroll to the top of the page   and for styling   btn-go-to-top   opacity   5  width 4   height 8   display  none  position  fixed  bottom  5   right  3   z-index  99  border  none  outline  none  background-color  red  color  white  cursor  pointer  padding  10px   border-radius  50       btn-go-to-top hover   opacity  1     top   transition  all 0 5s ease 0s  -moz-transition  all 0 5s ease 0s  -webkit-transition  all 0 5s ease 0s  -o-transition  all 0 5s ease 0s      this styling makes the button arrive at the bottom-right of the page   and in your page you can add the button to go to top like this   lt div id  btn-go-to-top  class  text-center top  gt   lt img src  uploads Arrow png  style  margin  7px   width  50   height  50   gt   lt  div gt    hope this help you if you have any doubts you are always free to ask me

User · Answer

window scroll  top  0  behavior   quot smooth quot     Just use this piece of code and it will work perfectly  You can wrap it into a method or event

User · Answer

also used below     document body scrollTop   0    document documentElement scrollTop   0

User · Answer

Hmm comment function off for me  try this  x000D   x000D    document  ready function            top   hide          function toTop               window  scroll function                  if    this  scrollTop    gt  100                        top   fadeIn                  else                       top   fadeOut                                           top   click function                     body html   animate                   scrollTop  0                800               return false                                                                      x000D   top     float right    width 39px    margin-top -35px      top       transition  all 0 5s ease 0s      -moz-transition  all 0 5s ease 0s      -webkit-transition  all 0 5s ease 0s      -o-transition  all 0 5s ease 0s      opacity  0 5      display none      cursor  pointer     top hover       opacity  1    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt   lt div id  top  onclick  toTop    gt  lt img src  to top png  alt  no pic    gt  klick to top lt  div gt  x000D   x000D   x000D

User · Answer

Pure Javascript only   x000D   x000D  var t1   0  x000D  window onscroll   scroll1  x000D   x000D  function scroll1     x000D    var toTop   document getElementById  toTop    x000D    window scrollY  gt  0   toTop style display    Block    toTop style display    none   x000D    x000D   x000D  function abcd     x000D    var y1   window scrollY  x000D    y1   y1 - 1000  x000D    window scrollTo 0  y1   x000D    if  y1  gt  0    x000D      t1   setTimeout  abcd     100   x000D      else   x000D      clearTimeout t1   x000D      x000D    x000D   toTop   x000D    display  block  x000D    position  fixed  x000D    bottom  20px  x000D    right  20px  x000D    font-size  48px  x000D    x000D   x000D   toTop   x000D    transition  all 0 5s ease 0s  x000D    -moz-transition  all 0 5s ease 0s  x000D    -webkit-transition  all 0 5s ease 0s  x000D    -o-transition  all 0 5s ease 0s  x000D    opacity  0 5  x000D    display  none  x000D    cursor  pointer  x000D    x000D   x000D   toTop hover   x000D    opacity  1  x000D    x000D   lt p gt your text here lt  p gt  x000D   lt img id  toTop  src  http   via placeholder com 50x50  onclick  abcd    title  Go To Top  gt  x000D   x000D   x000D

[javascript] smooth scroll to top

Examples related to javascript