向下滚动页面，然后使用jQuery向上滚动
向下滚动页面，然后使用jQuery向上滚动
提问于 2022-05-05 14:42:14
一旦我点击了一个按钮，我希望页面达到最低点，然后备份。我认为需要某种形式的回调，但我不能定义它。我在下面报告有关守则的部分。
$(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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-05-05 14:54:05
你需要使用setTimeout回到正确的动画时间！
$(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>
Stack Overflow用户
发布于 2022-05-05 14:51:44
您就在callback部件上，只需在callback函数中添加另一个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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72129100
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号