Question

我遇到了一个来自网站的JavaScript + CSS源代码问题，它是一个“ScrollToTop”按钮。我已经检查了一些以前的帖子但是没有它们似乎解决了我的问题。

所以我将JavaScript放在“btop.js”文件中，将CSS放在“style.css” - 主样式表中。现在，当我向下滚动（远离顶部）按钮应该出现，但它没有。我删除了“display：none;”用于检查脚本是否正常运行的属性，是的。但我不知道它为什么不淡出。任何帮助，将不胜感激。

按钮的简单代码：

<a href="#" class="scrollToTop">Scroll To Top</a>

CSS：

.scrollToTop{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    top:75px;
    right:40px;
    display:none;
    background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
    text-decoration:none;
}

JavaScript：

$(document).ready(function(){


    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });


    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});

链接到标题中的js：

<script src="btop.js" type="text/javascript"></script>

如果需要，这里是我尝试实现代码的网站：http://www.areeb-beigh.tk/（包含我上面提到的代码）。如您所见，滚动回到顶部按钮不会出现在页面中（index.html）。

注意：我只是一个初学者，所以如果你能保持简单，那就请：）。

提前致谢。

Answer 1

您需要包含您的jquery库才能使代码生效。

在您的html <head>元素<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>中这样。

必须在<script src="btop.js" type="text/javascript"></script>之前包含它，以便脚本可以正确使用库。

Answer 2

作为一个拇指规则，这是一个jQuery插件，请在btop.js加载之前添加jQuery库。

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="btop.js" type="text/javascript"></script>

我怀疑这是因为之前的动画未决。你可能会做的是：

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').stop(true, true).fadeIn();
    } else {
        $('.scrollToTop').stop(true, true).fadeOut();
    }
});

由于两个淡入淡出函数都是动画，因此可能存在待处理的动画队列。因此，添加.stop(true, true)将停止之前的动画并使其正常工作。如果有效，请告诉我们。

Answer 3

我刚刚使用开发工具检查了您的网站，问题非常明显。首先，您的网站连接不是很稳定，让您的托管公司知道。

由于jquery脚本未运行，因此未显示滚动顶部徽标。

将下面的代码放在关闭的body标记元素之前，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/btop.js"></script>

我不确定你的btop.js文件是否有正确的路径，如果没有它之前的Jquery，我将永远不会在第一时间运行。

可以肯定的是，我刚刚介绍了btop脚本，请看这里，因为我没有你的照片我使scrolltop文本字体大小非常大：

http://codepen.io/damianocel/pen/dYYxdG

Et瞧，它正在工作，欢呼： - ）

请注意，这也是呈现页面速度最快的方式。

对象没有淡入--fadeIn（）;

3 个答案: