javascript - 内容选项卡 - 滚动到 div 内容
问题描述
我正在使用带有 NEXT 和 BACK 按钮的内容选项卡进行导航。
这里的问题是,向下滚动到内容的底部并单击 NEXT 按钮,它转到下一个 div 但它停留在页面底部。
当我单击 NEXT/BACK 按钮时如何滚动顶部?
这是代码
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length) {
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
//alert("I was called from btnNext");
}
hideButtons(current);
});
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
btnnext.trigger('click');
}
hideButtons(current);
});
});
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if(current == limit) { btnnext.hide(); btnsubmit.show(); }
}
解决方案
我已经检查了你的代码,你需要做的就是打电话
scrollTo({ top: 0, behavior: 'smooth' });
在您的按钮单击和完成时,检查工作示例。
你也可以使用 jQuery 的 animate() 函数,
像这样,
$("html, body").animate({ scrollTop: 0 }, 600);
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length) {
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
//alert("I was called from btnNext");
}
hideButtons(current);
scrollTo({ top: 0, behavior: 'smooth' });
});
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
btnnext.trigger('click');
}
hideButtons(current);
scrollTo({ top: 0, behavior: 'smooth' });
});
});
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if(current == limit) { btnnext.hide(); btnsubmit.show(); }
}
.container{padding-bottom:200px !important}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="step well">Step 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div>
<div class="step well" style="background-color: brown">Step 2
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div>
<div class="step well" style="background-color: green">Step 3 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.
Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet.
Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio.
Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.</div>
<button class="action back">Back</button>
<button class="action next">Next</button>
<button class="action submit btn btn-success">Submit</button>
</div>
</div>
</div>
推荐阅读
- java - Java groovy 流比较两个列表并返回单个布尔变量
- unity3d - 获取对序列化列表的引用
在统一 - c# - 在 C# Mono 中使用 Xlib 设置“前景”窗口
- opencv4 - opencv+SaperaLT++ 带有垃圾名称的多个不需要的窗口
- python - 使用棉花糖验证架构时出现 AttributeError
- java - 如何在 Java 数组中建模相互依赖的工作表?
- r - 如何在用户定义函数的 write.csv 参数中放置字符串
- java - Flink 将所有流元素保存在 HashMap 中
- xamarin.forms - MvvmCross.Forms - 自定义 NavigationBar(其中包含 SearchBar)
- c++ - Qtopengl,为什么不能使用不同的vbo绘制两个立方体