带有鼠标滚轮效果的jQuery平滑滚动
Posted
技术标签:
【中文标题】带有鼠标滚轮效果的jQuery平滑滚动【英文标题】:Jquery smooth scroll with mousewheel effect 【发布时间】:2018-05-16 21:00:01 【问题描述】:当我的页面第一次加载时,我有一个全屏 jumbotron。当用户使用鼠标滚轮向下滚动时,我想使用 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);
);
);
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于带有鼠标滚轮效果的jQuery平滑滚动的主要内容,如果未能解决你的问题,请参考以下文章