-2

This question may look like a repeated one, but I did not find a real answer how to jump to the top of page as FAST as Ctrl+Home usual browser shortcut.

Many advices how to do this "smoothly" - but I need a fastest JUMP to top without any "smooth scrolling".

I have the following usual function

<script type="text/javascript">
var timeOut;
function scrollToTop() {
  if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
    window.scrollBy(0,-100);
    timeOut=setTimeout('scrollToTop()',0);
  }
  else clearTimeout(timeOut);
}
</script>

So, how to force it REALLY JUMP to top...not "smooth scroll" ?

Any other solution (beside function above) is also of interest.

Thanks in any hint to try.

Serge
  • 591
  • 1
  • 5
  • 20

4 Answers4

2

Simply try like this window.scroll(0,0).

The scrolling functions do not inherently include any delay or smooth transitioning. So if you simply pass the x,y coordinates as 0,0 you will be immediately moved to the top of the window.

Boaz
  • 17,982
  • 8
  • 55
  • 62
  • Thanks, tried your variant with all above. It definitely works very well, but still not so fast as Ctrl+Home - but it seems we have to accept it. – Serge Jun 24 '15 at 11:51
  • @Serge In Chrome they seem to be equivalent in response time. Try the following: scroll down, paste this directly in the address bar `javascript:window.scroll(0,0);` and hit Enter. It should be as instantaneous as Ctrl+Home. – Boaz Jun 24 '15 at 12:25
2

try using: window.scrollTo(0, 0);

madalinivascu
  • 30,904
  • 4
  • 32
  • 50
1

You can do it simply, with an anchor.

<script type="text/javascript">
function scrollToTop() {
    window.location = '#';
}
</script>
Ulti
  • 478
  • 4
  • 18
  • Thanks, tried your variant with all above. It definitely works very well, but still not so fast as Ctrl+Home - but it seems we have to accept it. – Serge Jun 24 '15 at 11:50
-1

$(function() {
  $("#goToTop").click(function() {
    $('body').animate({ scrollTop: $("html").offset().top}, 0);
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus ligula ut lacus vestibulum, sit amet auctor risus ultrices. Morbi fringilla non ex vel placerat. Donec ut libero condimentum, vestibulum libero sit amet, maximus nulla. Vivamus sit amet turpis scelerisque, varius lectus vel, tincidunt metus. Nulla at porta diam. Pellentesque vel interdum arcu, quis porttitor lacus. Pellentesque sollicitudin ante sapien, a fermentum ligula aliquam sed. Vivamus vitae consequat justo, ac fringilla nunc. Fusce quis commodo est. Pellentesque a augue non odio porttitor vulputate. Etiam maximus orci sed libero rutrum, in rutrum dui tristique. Praesent semper laoreet convallis. Nam volutpat lectus dolor, ut tincidunt enim bibendum et. Sed nisl arcu, tempus vel dui at, egestas dignissim orci.

Quisque vitae pellentesque nunc. Proin finibus quam massa, in lobortis neque consequat nec. Ut condimentum cursus molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eu enim eget odio vestibulum tincidunt ac sit amet nulla. Nullam pellentesque nisl fringilla imperdiet lobortis. Nullam malesuada, elit dictum placerat tristique, ex mauris pretium purus, eu venenatis est augue vitae enim.

Proin varius bibendum mi sed efficitur. Duis eget urna sodales risus mattis tincidunt non at massa. Vivamus ornare orci nisl, eu rutrum diam condimentum et. Cras suscipit velit odio, ac dictum eros dictum et. Aliquam ut finibus nulla, a eleifend dolor. Aenean vitae malesuada nisl. Sed tellus ante, auctor eget faucibus id, pharetra et nibh. Quisque lorem libero, sagittis quis arcu in, pellentesque consectetur enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eget orci in risus rhoncus egestas consectetur in eros.

Etiam id auctor sem, eget finibus odio. Sed pellentesque mollis dolor, in fermentum diam aliquam quis. Phasellus finibus neque vel justo scelerisque, in luctus turpis fringilla. Nullam vitae orci sit amet augue vehicula cursus. Morbi fermentum orci ac ex fringilla, sed fringilla mi pharetra. Donec risus dolor, pretium id nunc et, tincidunt molestie eros. Duis tincidunt pharetra tincidunt. Pellentesque dignissim ipsum eu feugiat gravida. Etiam id pulvinar ligula, sit amet pretium mi. Fusce quis ultrices nunc, dapibus accumsan sapien. Proin et arcu ultrices, dignissim eros non, pretium leo. Vestibulum euismod turpis urna, nec consectetur dui congue eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ac nisl facilisis, vehicula sapien at, semper turpis. Pellentesque facilisis, leo vitae posuere lacinia, ex urna ullamcorper risus, eu sollicitudin risus neque quis libero.

Phasellus vulputate enim arcu, quis cursus diam dictum et. Aenean ac massa ut justo blandit facilisis. Maecenas sollicitudin fermentum mi non hendrerit. Etiam non feugiat odio. Nulla vel urna non magna consectetur facilisis. Sed vitae blandit erat. Ut ac consectetur lorem. Quisque luctus risus ex, vitae scelerisque risus suscipit a. Cras varius ex vitae lacinia blandit. Fusce a commodo mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus ligula ut lacus vestibulum, sit amet auctor risus ultrices. Morbi fringilla non ex vel placerat. Donec ut libero condimentum, vestibulum libero sit amet, maximus nulla. Vivamus sit amet turpis scelerisque, varius lectus vel, tincidunt metus. Nulla at porta diam. Pellentesque vel interdum arcu, quis porttitor lacus. Pellentesque sollicitudin ante sapien, a fermentum ligula aliquam sed. Vivamus vitae consequat justo, ac fringilla nunc. Fusce quis commodo est. Pellentesque a augue non odio porttitor vulputate. Etiam maximus orci sed libero rutrum, in rutrum dui tristique. Praesent semper laoreet convallis. Nam volutpat lectus dolor, ut tincidunt enim bibendum et. Sed nisl arcu, tempus vel dui at, egestas dignissim orci.

Quisque vitae pellentesque nunc. Proin finibus quam massa, in lobortis neque consequat nec. Ut condimentum cursus molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eu enim eget odio vestibulum tincidunt ac sit amet nulla. Nullam pellentesque nisl fringilla imperdiet lobortis. Nullam malesuada, elit dictum placerat tristique, ex mauris pretium purus, eu venenatis est augue vitae enim.

Proin varius bibendum mi sed efficitur. Duis eget urna sodales risus mattis tincidunt non at massa. Vivamus ornare orci nisl, eu rutrum diam condimentum et. Cras suscipit velit odio, ac dictum eros dictum et. Aliquam ut finibus nulla, a eleifend dolor. Aenean vitae malesuada nisl. Sed tellus ante, auctor eget faucibus id, pharetra et nibh. Quisque lorem libero, sagittis quis arcu in, pellentesque consectetur enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eget orci in risus rhoncus egestas consectetur in eros.

Etiam id auctor sem, eget finibus odio. Sed pellentesque mollis dolor, in fermentum diam aliquam quis. Phasellus finibus neque vel justo scelerisque, in luctus turpis fringilla. Nullam vitae orci sit amet augue vehicula cursus. Morbi fermentum orci ac ex fringilla, sed fringilla mi pharetra. Donec risus dolor, pretium id nunc et, tincidunt molestie eros. Duis tincidunt pharetra tincidunt. Pellentesque dignissim ipsum eu feugiat gravida. Etiam id pulvinar ligula, sit amet pretium mi. Fusce quis ultrices nunc, dapibus accumsan sapien. Proin et arcu ultrices, dignissim eros non, pretium leo. Vestibulum euismod turpis urna, nec consectetur dui congue eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ac nisl facilisis, vehicula sapien at, semper turpis. Pellentesque facilisis, leo vitae posuere lacinia, ex urna ullamcorper risus, eu sollicitudin risus neque quis libero.

Phasellus vulputate enim arcu, quis cursus diam dictum et. Aenean ac massa ut justo blandit facilisis. Maecenas sollicitudin fermentum mi non hendrerit. Etiam non feugiat odio. Nulla vel urna non magna consectetur facilisis. Sed vitae blandit erat. Ut ac consectetur lorem. Quisque luctus risus ex, vitae scelerisque risus suscipit a. Cras varius ex vitae lacinia blandit. Fusce a commodo mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<button id="goToTop">Go to top</button>

See Warface anwser for more informations

I used .animate with duration equal to 0.

Community
  • 1
  • 1
Anwar
  • 3,572
  • 2
  • 31
  • 58