[英]Jquery smooth scroll with mousewheel effect
首次加載頁面時,我將擁有一個全屏超大屏幕。 當用戶使用鼠標滾輪向下滾動時,我想使用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);
});
});
您可以使用
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.