Question

我通过在测试页中应用jquery整合了一些基本的网站功能，这些功能包括平滑滚动，在上下滚动网页时将活动类分配给重点部分，缩小导航栏并返回顶部按钮。但是，我意识到，一旦添加了“回到最前面的btn”，所有这些功能都将停止工作，因为它只能工作一次，然后一切都停止工作，并且网站只是“死机”，甚至无法向下滚动。我做了一些研究，并纠正了我的代码，从单独使用'.click（）'到应用'.on（event，func）'，因为有人经历了与我相同的事情，但仍然无济于事。有人可以看看我的代码吗，请让我知道我还应该更改它以便使其正常运行。谢谢

$(document).ready(function() {
    var scrollLink = $('.scroll');
  // smooth scrolling feature  
    scrollLink.on('click',function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top
        }, 900)
    })

   

    $(window).scroll(function() {

        var scrollbarLocation = $(this).scrollTop();
        var btn = $('.upBtn');

   // shrink the navbar once scrollbar moves down more than 50px
        if($('.navbar').offset().top > 50) {
            $('.navbar').addClass('navbar-shrink');
        } else {
            $('.navbar').removeClass('navbar-shrink');
        }

    // show users which section they are looking at by applying active class to each nav link
        scrollLink.each(function() {
            var sectionOffset = $(this.hash).offset().top - 55;
            if(sectionOffset <= scrollbarLocation) {
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active')
            } 
        })
    
    // show the go up bottom in the right bottom cornor once scroll bar moves down more then 100px 
        if($(window).scrollTop() > 100) {
            btn.addClass('show');
        } else {
            btn.removeClass('show')
        }
    // scrolling back up to the top once btn being clicked
    // I have changed my code to '.on' after done some reseatch but the button still not working once being clicked and working once.
        btn.on('click',function(e) {
            e.preventDefault();
            $('html, body').animate({scrollTop: 0}, 900)
        })
    })

})

section {
    width: 100%;
    height: 900px;
}

#home {    
    background-color: lightblue;
}

#about {
    background-color: lightsalmon;
}

#contact {
    background-color: lightpink;
}

.active {
    background-color: blue !important;
}

.navbar {
    transition: all .4s ease-in 0s;
}

.navbar-shrink {
    padding-top: .2rem;
    padding-bottom: .2rem;
    transition: all .4s ease-in 0s;
    background: transparent !important;
}

.upBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
}

.show {
    opacity: 1;
    visibility: visible;
}

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>jQuery Smooth Scrolling</title>
</head>

<body>


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link scroll" href="#home">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section id='home'></section>
    <section id='about'></section>
    <section id='contact'></section>

    <a href="#" class="upBtn">Up</a>
   <!-- jQuery cdn has to be full version not slim as slim version dosen't include the animation features-->
    <script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src='main.js'></script>
</body>

</html>

一次工作后，jQuery上升按钮停止工作

0 个答案: