jQuery具有滚轮效果的平滑滚动

Question

首次加载页面时，我将拥有一个全屏超大屏幕。 当用户使用鼠标滚轮向下滚动时，我想使用Jquery动画效果将导航栏（在jumbotron下方）带到页面顶部。 我已经有一个可以实现此目的的按钮，但是我也想用鼠标滚轮来实现。

我怎样才能做到这一点？ 谢谢

    <!-- Jumobtron-->
    <div class="jumbotron" style="height: 100vh;">
        <a href="#mainNavbar">
            <button type="button" class="btn" id="btnToNav">To Navbar</button>
        </a>
    </div>

    <!-- Navbar -->
    <nav class="navbar sticky-top" id="mainNavbar">
        <div class="container">
            <a asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a>
        </div>
    </div>
</nav>

jQuery：

$(document).ready(function() {
    $('#btnToNav').on('click', function(event) { 
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $("#mainNavbar").offset().top
        }, 1000);
    });    
});

Answer 1

您可以使用
mousewheel或DOMMouseScroll

如果你想运行在Firefox该功能为好，你应该使用他们两个，因为Firefox不会有mousewheel ，但他们有DOMMouseScroll

 $(document).ready(function() { $('#btnToNav').on('click', function(event){ event.preventDefault(); $('html, body').animate({ scrollTop: $("#mainNavbar").offset().top }, 1000); }); $('html, body').on('mousewheel', function(e){ e.preventDefault(); var delta = event.wheelDelta; if(delta < 0){ // scroll from top to bottom $('html, body').animate({ scrollTop: $("#brand").offset().top }, 1000); }else{ // scroll from bottom to top $('html, body').animate({ scrollTop: $("#btnToNav").offset().top }, 1000); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Jumobtron--> <div class="jumbotron" style="height: 100vh;"> <a href="#mainNavbar"> <button type="button" class="btn" id="btnToNav">To Navbar</button> </a> </div> <!-- Navbar --> <nav class="navbar sticky-top" id="mainNavbar"> <div class="container"> <a id="brand" asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a> </div> </nav>