滾動到頂部動畫后不向下滾動

Question

我的網頁上有一個“滾動到頂部”按鈕，該按鈕具有動畫功能，當按下時可以平滑滾動到頂部。 該功能可以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>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic|Oswald);

* {
    font-family: 'Open Sans';
    margin: 0;
}

body{
    position: relative;
    background-image: url('images/wallpaper1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/*
//////////////////////////
/ToggleToggleToggleToggle
//////////////////////////
*/
.toggleClassOff{
    position: fixed;
    font-size: 3.0em;
    cursor: pointer;
    top: 0.2em;
    left: 1em;
    left: 0.6em;
    z-index: 1;
    color: #fff;
}
.toggleClassOn{
    position: fixed;
    font-size: 3.0em;
    cursor: pointer;
    top: 0.2em;
    left: 1em;
    left: 4.4em;
    z-index: 1;
    color: #fff;
}

/*
/////////////////////////
/NavbarNavbarNavbarNavbar
/////////////////////////
*/
.navbarClassOff {
    position: fixed;
    width: 12em;
    background-color: blue;
    height: 100vh;
    left: -12em;
    background-color: #666;
}
.navbarClassOn {
    position: fixed;
    width: 12em;
    background-color: blue;
    height: 100vh;
    left: 0em;
    background-color: #666;
}

#navbarUl {
    margin-top: 2em;
    list-style-type: none;
}
#navbarUl > li {
    margin-bottom: 1em;
    margin: auto;
    margin-left: -2.5em;
    width: 10.4em;
    text-align: center;
    line-height: 3em;
    font-size: 1.2em;
}
#navbarUl >li:hover {
    background-color: #fff;
}
#navbarUl > li > a {
    text-decoration: none;
    color: #ff6600;
    display: block;
    font-weight: 300;
}
/*
/////////////////////////////
/ContentContentContentContent
/////////////////////////////
*/
#content{
    margin-bottom: 50px;
}
.contentClassOff{
    position: relative;
    width: 70vw;
    margin: auto;
    left: 0em;
    top: 3em;
    font-size: 1.2em;
    background-color: #fff;
    opacity: 0.9;
    padding: 1em;
}
.contentClassOn{
    position: relative;
    width: 70vw;
    margin: auto;
    left: 5em;
    top: 3em;
    background-color: #fff;
    opacity: 0.9;
    padding: 1em;
}
#content > p {
    width: 100%;
}

#content h1 {
    position: relative;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    text-align: center;
    margin-bottom: 1em;
}

img {
    max-width: 100%;
    margin-bottom: 3em;
}
#id-photos-container{
    width: 100%;
    margin: auto;
    float: left;
    clear: both;
}
.id-photos{
    float: left;
    height: 280px;
    width: 280px;
}
.id-photos:first-child {
    margin-left: 60px;
}

/*
p > iframe {
    width: 100%;
}
*/
/*
/////////////////////////////////////////
/TransitionTransitionTransitionTransition
/////////////////////////////////////////
*/
.toggleClassOff, .navbarClassOff, .contentClassOff {
    transition: left 0.4s ease-in;
}

/*
/////////////////////////////////////////
/About-Page Section
/////////////////////////////////////////
*/
#about-page-container > img {
    width: 80px;
    height: 80px;
    position: fixed;
    right: 3%;
    top: 6%;
    z-index: 10;
    animation-name: img-size;
    animation-iteration-count: 3;
    animation-delay: 2s;
    animation-duration: 1s;
}
@keyframes img-size {
    0% {height: 80px; width: 80px}
    50% {height: 120px; width: 120px;}
    100% {height: 80px; width: 80px;}
}

.about-page-class-off {
    position: fixed;
    z-index: 10;
    width: 300px;
    height: 220px;
    opacity: 0;
    background-color: #666;
    border-radius: 10px;
    top: 100px;
    right: 100px;
    padding: 18px;
}
.about-page-class-on {
    position: fixed;
    z-index: 10;
    width: 300px;
    height: 220px;
    opacity: 1;
    background-color: #666;
    border-radius: 10px;
    top: 100px;
    right: 100px;
    padding: 18px;
}
.about-page-class-off {
    transition: opacity 0.2s ease-in;
}

#about-page > p {
    color: #ff6600; 
   /* color: #fff; */
   /* color: #ad33ff; */
    font-size: 1.4em;
}

/*
/////////////////////////////////////////
/Scroll to top Scroll to top Scroll to top
/////////////////////////////////////////
*/

#scroll {
    position: fixed;
    bottom: 10%;
    right: 3%;
    z-index: 20;
    display: none;
    height: 80px;
    width: 80px;
    text-decoration: none;
}

:focus {outline:none;}

Answer 1

嘗試將click事件移到滾動之外：

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

jsfiddle： https ://jsfiddle.net/zmp1ghat/

Answer 2

您不應在滾動事件處理程序中放入處理單擊事件的邏輯。 您的代碼所做的是，

用戶滾動頁面
對於每個滾動，將注冊一個單擊事件。
例如，當用戶滾動到頁面底部時，滾動事件將被發送100次。 因此，點擊事件將被注冊數百次。
現在，每當您單擊滾動到頂部按鈕時，所有已注冊的單擊事件都將被觸發。
現在，當您在所有已經注冊的事件完成之前滾動更多時，將會注冊更多的單擊事件，這就是導致您出現問題的原因。

解

JsBin- http ://jsbin.com/zaxakuniju/1/edit?html,js，輸出（單擊最后一個圖像滾動到頂部）

$(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');
        }
    });
})

滾動到頂部動畫后不向下滾動

問題描述

2 個解決方案

解決方案1
1 2016-02-10 05:53:25

解決方案2
1 已采納 2016-02-10 06:04:28

滾動到頂部動畫后不向下滾動

問題描述

2 個解決方案

解決方案1 1 2016-02-10 05:53:25

解決方案2 1 已采納 2016-02-10 06:04:28

解決方案1
1 2016-02-10 05:53:25

解決方案2
1 已采納 2016-02-10 06:04:28