jquery - 如何使用jQuery慢慢向下滚动页面?
问题描述
单击按钮时,我试图获得缓慢的滚动效果。现在我找到了一个函数,可以在单击元素时跳转到页面的哈希值。
我使用 scrolltop 方法跳下我的页面。我从页面往下走-220。
浏览器中的错误消息:
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLDivElement.<anonymous> (script.js:35)
at HTMLDivElement.dispatch (jquery.min.js:2)
at HTMLDivElement.y.handle (jquery.min.js:2)
欢迎任何帮助。如果您有问题,请询问。
代码:
$(document).ready(function() {
$("#choose-time div").on('click', function(event) {
$(this).toggleClass("selectedBox");
if (this.hash !== '') {
event.preventDefault();
var hash = this.hash;
$("html, body").animate({
scrollTop: $(hash).offset().top - 220
}, 900);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="choose-time">
<h2>Kies een Datum</h2>
<div>
<p>Donderdag</p>
<p>28/04/2019</p>
</div>
<p><strong>Click</strong> de gewenste datum aan a.u.b</p>
</section>
解决方案
您可以使用下面的代码作为您的 jQuery
$(document).ready(function(){
$("#choose-time div").on('click', function(event){
$(this).toggleClass("selectedBox");
var hash = $(this).offset().top - 220;
if(hash !== ''){
event.preventDefault();
$("html, body").animate({
scrollTop: hash
}, 900);
}
});
});
推荐阅读
- linux - Bash 脚本查找在特定时间范围内创建的 .jpgs,然后重命名它们
- shell - Jenkins 管道不执行管道 | 多个命令
- ios - 具有默认 modalPresentationStyle 的视图控制器上的标题 - iOS 13
- kubernetes-helm - Helm 3:访问库图表的/文件
- javascript - 开始滚动时相册消失
- javascript - 将来自异步请求的响应保存到值(节点 js)
- r - 通过 Quasiquotation & render 函数评估 R Markdown 参数
- rust - 为什么允许在一个表达式中同时使用数字类型向量的不可变和可变借用?
- ios - 将 UIView (Overlay) 与应用背景混合
- c - CS50 CAESAR PSET2 通过命令行参数 argv[] 的密钥加密文本的问题