jquery - 返回顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14249998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery - back to top
提问by jhunlio
回答by Explosion Pills
$("#toTop").click(function () {
//1 second of animation time
//html works for FFX but not Chrome
//body works for Chrome but not FFX
//This strange selector seems to work universally
$("html, body").animate({scrollTop: 0}, 1000);
});
回答by Codeman
Updated JSFiddle with solution
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$("#toTop").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});
回答by Bishwa Timilsina
First lets create the button.
首先让我们创建按钮。
<a href="#" class="scrollToTop">Scroll To Top</a>
Now we can style the button with the following CSS.
现在我们可以使用以下 CSS 设置按钮样式。
<style>
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:75px;
right:40px;
display:none;
background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
text-decoration:none;
}
</style>
Copy and paste the following in the Javascript file to add the Javascript functionality.
将以下内容复制并粘贴到 Javascript 文件中以添加 Javascript 功能。
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
回答by Ramesh kumar
$(window).on("scroll",function() {
if ($(this).scrollTop() > 50 ) {
$('#toTop').fadeIn(400);
} else {
$('#toTop').fadeOut(400);
}
});
$("#toTop").on("click",function() {
$("html, body").animate({scrollTop: 0}, 1200);
});
回答by JoyGuru
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
Live demo, full script and tutorial can be check from here - Back to top button using jQuery and CSS
可以从这里查看实时演示、完整脚本和教程 - 使用 jQuery 和 CSS 的返回顶部按钮
