Question

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

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;
});
});

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

Answer 1

我认为您只需要将display:none;添加到#scrolltotop，就像这样：

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

<强> Working Example

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

Answer 2

将z-index: 1000添加到返回顶部的链接，以便它显示在所有内容之上。

使用js滚动到顶部

2 个答案: