Javascript 滚动到顶部动画后不向下滚动_Javascript_Jquery_Html_Scrolltop

Javascript 滚动到顶部动画后不向下滚动

javascript jquery html

Javascript 滚动到顶部动画后不向下滚动,javascript,jquery,html,scrolltop,Javascript,Jquery,Html,Scrolltop,我的网页上有一个滚动到顶部的按钮，它有一个动画功能，按下时可以平滑地滚动到顶部。该功能100%工作，但在它滚动到顶部后，它不允许我正常地再次向下滚动。就像这个函数一直在运行一样这是我的密码： $(window).scroll(function(){ var scroll = $('#scroll'); if ($(this).scrollTop() > 400) { scroll.fadeIn('

我的网页上有一个滚动到顶部的按钮，它有一个动画功能，按下时可以平滑地滚动到顶部。该功能100%工作，但在它滚动到顶部后，它不允许我正常地再次向下滚动。就像这个函数一直在运行一样

这是我的密码：

    $(window).scroll(function(){
            var scroll = $('#scroll');
            if ($(this).scrollTop() > 400) {
                  scroll.fadeIn('slow');
            }
            else  {
                scroll.fadeOut('slow');
            }

            $('#scroll-image').on('click', function(){
            $('html, body').animate({scrollTop: 1}, 800);
            return false;
            });
        });

有什么建议吗？提前谢谢你

编辑：这是我的HMLT

<!doctype html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="google-site-verification" content="D5eWVqc8lqeGSw4BjMank9FS8Dy4lusI7dxEm9qHtzI" />
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div>
            <a id="toggle" class="toggleClassOff">≡</a>
            <nav id="navbar" class="navbarClassOff">
                <ul id="navbarUl">
                    <li><a href="index.html">About Me</a></li>
                    <li><a href="contact.html">Contact Me</a></li>
                    <li><a href="skills.html">Skills</a></li>
                    <li><a href="qualifications.html">Qualifications</a></li>
                </ul>
            </nav>
        </div>
        <div id="scroll">
            <a href="#" id="scroll-image"><img src="images/top-button.png"></a> 
        </div>
        <div id="about-page-container">
            <img id="about-page-image" src="images/question.png">
            <div id="about-page" class="about-page-class-off">
                <p></p>
            </div>
        </div>
        <div id="content" class="contentClassOff">
            <h1></h1>
            <img src="images/2009-English-Certificate.jpg" alt="Can't find image">
            <img src="images/2010-English-Certificate.jpg" alt="Can't find image">
            <img src="images/Senior-Certificate.jpg" alt="Can't find image">
            <h1></h1>
            <img src="images/comptiaA.jpg" alt="Can't find image">
            <img src="images/comptiaN.jpg" alt="Can't find image">
            <img src="images/first-aid.jpg" alt="Can't find image">
            <img src="images/rope-access.jpg" alt="Can't find image">
        </div>
    </body>
</html>

尝试将单击事件移动到滚动之外：

 $(window).scroll(function(){
            var scroll = $('#scroll');
            if ($(this).scrollTop() > 400) {
                  scroll.fadeIn('slow');
            }
            else  {
                scroll.fadeOut('slow');
            }

        });

            $('#scroll-image').on('click', function(){
            $('html, body').animate({scrollTop: 1}, 800);
            return false;
            });

JSFIDLE:

您不应该将处理单击事件的逻辑放在scroll事件处理程序中。代码的作用是

用户滚动浏览页面

对于每个滚动，将注册一个单击事件

例如，当用户滚动到页面底部时，滚动事件将发出100秒。因此，点击事件将被注册数百次

现在，无论何时单击“滚动到顶部”按钮，所有已注册的单击事件都将被触发

现在，当您在所有已注册事件完成之前滚动更多时，将注册更多的单击事件，这就是导致问题的原因

解决方案

JsBin- （单击最后一幅图像滚动至顶部）

我可以看看你的html代码吗？当然可以！你想看哪一部分？只有按钮div或整个文档？您可以共享整个文档编辑我的原始问题以包含它！你的css不见了。也请分享。非常感谢！我现在明白我错在哪里了。现在开始工作了：）不客气！始终确保在$（函数（）{}）（）内注册事件处理程序

 $(window).scroll(function(){
            var scroll = $('#scroll');
            if ($(this).scrollTop() > 400) {
                  scroll.fadeIn('slow');
            }
            else  {
                scroll.fadeOut('slow');
            }

        });

            $('#scroll-image').on('click', function(){
            $('html, body').animate({scrollTop: 1}, 800);
            return false;
            });

$(function () {
    $('#scroll-image').on('click', function(){
        $('html, body').animate({scrollTop: 1}, 800);
        return false;
    });

    $(window).scroll(function(){
        var scroll = $('#scroll');
        if ($(this).scrollTop() > 400) {
            scroll.fadeIn('slow');
        } else {
            scroll.fadeOut('slow');
        }
    });
})