使用js滚动到顶部

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

工作实例

在使用fadeIn() ，需要设置元素的初始显示状态，以便不要试图对已经存在的元素进行fadeIn() 。

Answer 2

将z-index: 1000添加到后到顶部链接，以便将其显示在所有内容的顶部。