Question

我编写了这个＆＃34; scrollToTop＆＃34;按钮，以便当用户向下滚动时，会显示一个按钮，单击该按钮会将页面向上滚动到顶部。但由于某种原因，它无法正常工作。

没有向控制台报告语法错误......

问题：我现在看到的是，css应该没问题，因为如果删除display：none;样式是正确的，按钮显示在正确的位置，但问题是，当我向下滚动页面时，按钮不显示，这意味着javascript没有应用fadeIn（）;事情，但我不知道为什么......

HTML

 <a href="#" class="scrollToTop"></a>

CSS

 .scrollToTop{
    width:75px; 
    height:75px;
    padding:10px; 
    text-align:center; 
    text-decoration: none;
    position:fixed;
    top:100px;
    right:40px;
    opacity:0.5;
    display:none;
    background: url('images/scroll_up.png') no-repeat 0px 0px;
    background-size: 75px 75px;
    -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
    transition: all 0.3s;
 }

 .scrollToTop:hover{
    text-decoration:none;
    top:90px;
    -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
    transition: all 0.3s;
 }

的JavaScript / jQuery的

$(document).ready(function(){
    //Check to see if the window is at the top, if not, then display scroll up button
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').fadeIn();
    } else {
        $('.scrollToTop').fadeOut();
    }

    //Click event to scroll up to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},750);
        return false;
    });
});

Answer 1

您必须在每次滚动事件后检查当前滚动位置：

$(document).ready(function(){
    //Check to see if the window is at the top, if not, then display scroll up button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll up to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},750);
        return false;
    });
});

<强> EXAMPLE

Answer 2

这部分代码

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

当文档准备好时，

仅被调用一次。当用户向上和向下滚动时，您需要检查此项，例如，您可以在窗口滚动事件

中进行换行

$(document).ready(function() {
    //Check to see if the window is at the top, if not, then display scroll up button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll up to top
    $('.scrollToTop').click(function() {
        $('html, body').animate({scrollTop : 0},750);
        return false;
    });
});

为什么这个“滚动到顶部”按钮代码不起作用？

2 个答案: