我正在努力实现"回到顶部"通过简单的jquery在页面上的功能。 "返回顶部"按钮按预期显示/消失。 当我点击它时出现,我希望它会转到页面顶部,而不会发生任何事情。我不确定出了什么问题。
以下是代码:
的CSS:
isset()
HTML:
#btoTop {
padding: 15px 10px;
background: #1f242a;
color: #fff;
position: fixed;
bottom: 0;
right: 15px;
display: none;
cursor:pointer;
cursor:hand;
width:130px;
height:40px;
}
JS:
<div id='btoTop'>BACK TO TOP</div>
注意:如果我在$(窗口).scroll()中调用click函数,我可以单击该按钮。但它在窗口调整大小时会闪烁,并且效果不佳。
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
答案 0 :(得分:0)
每次滚动时,您都会在按钮上绑定click
,这是不必要的。你应该改变它:
$(document).ready(function () {
$(window).scroll(function () {
if( $(window).scrollTop() > 0 ) {
$("#btoTop").fadeIn("slow");
} else {
$("#btoTop").fadeOut("slow");
}
});
// Bound a single time
$("#btoTop").click(function ( event ) {
event.preventDefault();
console.log("Clicked the button");
$("html, body").animate({scrollTop:0 },"slow");
});
});
这可能不是问题,但应该更改以避免代码中出现奇怪的行为。
答案 1 :(得分:0)
当我试图点击它时,我发现DOM中的按钮尚未可用。 添加一个计时器就可以了。希望这可以帮助那些有类似问题的人...
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$timeout( function() {
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
}, 500);
});