JQuery - Scroll to top of page, then reload

Question

Working on a restart button for a visualisation I am building. It's a png with an onclick event as follows:

  $('.restart').on('click', function(){
    $(document).ready(function(){
    $("html, body").animate({ scrollTop: 0 }, "slow").then(location.reload(true));
  })});

I thought that, by the way I wrote this, that the page would scroll to the top and then reload. But that isn't happening, it'll scroll a small amount and then reload.

Could you please help me in getting this function working? Click > Scroll Top > Refresh

Answer 1

This should be of help

 $("a[href='#top']").click(async () => { await $("html, body").animate({ scrollTop: 0 }, "slow"); await setTimeout( () => { location.reload(true); },300); });

 <.DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Scroll to the top of the page with jQuery</title> </head> <body> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <a href='#top'>Go Top</a> </body> </html>

JQuery - Scroll to top of page, then reload

Question

1 answers

solution1
0 ACCPTED 2020-04-22 14:12:19

JQuery - Scroll to top of page, then reload

Question

1 answers

solution1 0 ACCPTED 2020-04-22 14:12:19

solution1
0 ACCPTED 2020-04-22 14:12:19