How to jump to top of browser page

Question

I m writing a modal popup and I need the browser to jump to the top of the screen when the open modal button is pressed  Is there a way to scroll the browser to the top using jQuery

User · Answer

I know this is old  but for those having problems in Edge   Plain JS  window scrollTop 0   Unfortunately  scroll   and scrollTo   throw errors in Edge

User · Answer

Pure Javascript solution theId onclick        gt  window scrollTo  top  0    If you want smooth scrolling theId onclick        gt  window scrollTo   top  0  behavior   smooth

User · Answer

If you re using jQuery UI dialog  you could just style the modal to appear with the position fixed in the window so it doesn t pop-up out of view  negating the need to scroll   Otherwise    var scrollTop   function         window scrollTo 0  0        should do the trick

User · Answer

You can set the scrollTop  like this      html body   scrollTop 0     Or if you want a little animation instead of a snap to the top      html  body   animate   scrollTop  0     fast

User · Answer

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  myBtn   style display    block   x000D        else   x000D          document getElementById  myBtn   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   myBtn   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   myBtn 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  myBtn  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

Without animation  you can use plain JS   scroll 0 0    With animation  check Nick s answer

User · Answer

You could do it without javascript and simply use anchor tags  Then it would be accessible to those js free   although as you are using modals  I assume you don t care about being js free

User · Answer

you re using jQuery UI dialog  you could just style the modal to appear with the position fixed in the window so it doesn t pop-up out of view  negating the need to scroll  Other

[javascript] How to jump to top of browser page

Examples related to javascript

Examples related to jquery

Examples related to css

[javascript] How to jump to top of browser page

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to modal-dialog