我正在为我的网站制作一个回到顶部的按钮,我有以下设置; 我的HTML代码;
<div class="back-to-top">A</div>
我的CSS;
.back-to-top{position: fixed; right: 60px; font-family: iconFont; font-size: 20px; color:#666; padding: 10px 15px 10px 15px; background-color: rgba(00, 00,00,0.3); border-radius: 5px; dislpay: none;}
.back-to-top:hover {cursor:pointer;颜色:#2E2E2E; background-color:rgba(0,0,0,0.4);}
我的Javascript;
$('.back-to-top').click(function () {
$("html, body").animate({
scrollTop: 0
}, 400);
return false;
});
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop > 100){
$('.back-to-top').css({ 'position': 'fixed', 'bottom' : '50px' , 'display' : 'block'});
}
else {
$('.back-to-top').css({ 'position': 'absolute', 'bottom': '-50px' , 'display' : 'none'});
}
});
我的问题是,当我加载页面时,按钮出现在页面的右上角,它不应该出现,但是当我滚动它时它会消失然后正常运行。此外,当我在中间的任何一点重新加载页面时,没有任何故障。当我在最顶层重新加载页面时,如何修复我的按钮出现在我的角落?
答案 0 :(得分:2)
答案 1 :(得分:0)
看起来您没有为按钮设置垂直位置。您只是在滚动页面时通过JavaScript添加此内容。
尝试将bottom:50px
添加到css中以设置按钮的初始位置