如何使用jQuery缓慢向下滚动页面?
How to use jQuery to scroll down the page slowly?
我试图在单击按钮时获得慢速滚动效果。
现在我找到了一个函数,可以在单击元素时跳转到页面的散列。
我使用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>
我认为您需要更正您使用的散列。查看下方 link 以了解散列在 jQuery 中的工作原理。
第二个选项,您可以使用特定的 ID 或 Class 并增加时间
$("html, body").animate({
scrollTop: $("#elementId").offset().top - 220
}, 4000);
您可以使用以下代码作为您的 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);
}
});
});
我试图在单击按钮时获得慢速滚动效果。 现在我找到了一个函数,可以在单击元素时跳转到页面的散列。
我使用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>
我认为您需要更正您使用的散列。查看下方 link 以了解散列在 jQuery 中的工作原理。
第二个选项,您可以使用特定的 ID 或 Class 并增加时间
$("html, body").animate({
scrollTop: $("#elementId").offset().top - 220
}, 4000);
您可以使用以下代码作为您的 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);
}
});
});