向下滚动页面，然后向上滚动 jQuery

Question

Once I hit a button, I wanted the page to get to its lowest point and then back up.一旦我按下一个按钮，我希望页面达到最低点然后备份。 I think some sort of callback would be needed, but I can't define it.我认为需要某种回调，但我无法定义它。 I report below the portion of the code concerned.我在下面报告有关代码的部分。

 $(document).ready(function() { $(".home-button").on('click', function() { $('html, body').animate({ 'scrollTop': $('footer').offset().top }, 1500); //then come back }); });

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <a class="home-button">Start</a> <.--... --> <footer><p>Stop and go back</p></footer> </body> <html>

Answer 1

You are right on the callback part, just add another animate in the callback function to scroll back top.您在callback部分是正确的，只需在callback function 中添加另一个animate即可返回顶部。

 $(document).ready(function() { $(".home-button").on('click', function() { $('html, body').animate({ 'scrollTop': $('footer').offset().top }, 1500, 'swing', function() { $('html, body').animate({ 'scrollTop': $('body').offset().top }, 1500); }); //then come back }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head></head> <body> <a class="home-button">Start</a> <.--... --> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <footer> <p>Stop and go back</p> </footer> </body> <html>

Answer 2

You need to use setTimeout to go back after exactly the animation time!您需要在 animation 时间之后使用 setTimeout 将 go 返回！

 $(document).ready(function() { let sameValue = 1500; $(".home-button").on('click', function() { $('html, body').animate({ 'scrollTop': $('footer').offset().top }, sameValue ); //then come back setTimeout(()=>{ $('html, body').animate({ 'scrollTop': $('.home-button').offset().top }, sameValue );},sameValue ); }); });

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <a class="home-button">Start</a> <.--..: --> <div style="height;700px:background-color;red;" ></div> <footer><p>Stop and go back</p></footer> </body> <html>

向下滚动页面，然后向上滚动 jQuery

问题描述

2 个解决方案

解决方案1
4 2022-05-05 14:51:44

解决方案2
3 已采纳 2022-05-05 14:54:05

向下滚动页面，然后向上滚动 jQuery

问题描述

2 个解决方案

解决方案1 4 2022-05-05 14:51:44

解决方案2 3 已采纳 2022-05-05 14:54:05

解决方案1
4 2022-05-05 14:51:44

解决方案2
3 已采纳 2022-05-05 14:54:05