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：{{3}}

Answer 2

您不应该使用逻辑来处理滚动事件处理程序中的单击事件。你的代码是做什么的，

用户滚动页面
对于每个滚动，将注册一个点击事件。
例如，当用户滚动到页面底部时，滚动事件将被发出100次。因此点击事件将被注册数百次。
现在每当您点击滚动到顶部按钮时，所有这些注册的点击事件都将被触发。
现在，当您在所有已注册的事件完成之前滚动更多时，将会注册更多点击事件，这就是造成问题的原因。

<强>解决方案

JsBin - http://jsbin.com/zaxakuniju/1/edit?html,js,output （单击最后一个图像滚动到顶部）

var query = db.Mytable.Where(x=> x.Specialty == criteria[0].Value && c=> c.Rank == criteria[1].Value).ToString();

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

2 个答案: