0

我正在尝试在我的网站上实现一个简单的“滚动到顶部”按钮。

HTML：

<a href="#" id="scrolltotop"><img src="img/scrolltotop.png"></a>

CSS：

#scrolltotop {
width: 40px;
height: 40px;
position: fixed;
right: 100px;
bottom: 50px;
display: block;     
}

JS：

jQuery(document).ready(function($){
$(window).scroll(function(){
    if ($(this).scrollTop() > 150) {
        $('#scrolltotop').fadeIn('slow');
    } else {
        $('#scrolltotop').fadeOut('slow');
    }
});
$('#scrolltotop').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 500);
    return false;
});
});

当我加载我的页面时，我在正确的位置看到按钮有一瞬间，然后它被我的一个背景所覆盖，该背景div位于我的 HTML 结构中的页面下方。最后，我在页面上的任何地方都看不到它，当我检查元素时它在正确的位置，只是不可见。

4

2 回答 2

1

我认为您只需要添加一个首字母display:none;即可#scrolltotop：

#scrolltotop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 100px;
    bottom: 50px;
    display:none;
}

工作示例

使用时，fadeIn()您需要设置元素的初始显示状态，这样您就不会尝试fadeIn()使用已经存在的元素。

于 2013-07-25T18:12:50.173 回答
0

添加z-index: 1000到返回顶部链接，使其显示在所有内容的顶部。

于 2013-07-25T17:52:50.117 回答