gpt4 book ai didi

javascript - 通过 jQuery 动画点击向上滚动 div(仅限简单的 jquery 代码)

转载 作者:行者123 更新时间:2023-11-28 01:29:34 28 4
gpt4 key购买 nike

我试图在单击时向上滚动一个 div,带有延迟或动画(我可以轻松添加)。我正在尝试通过 jquery 来做到这一点。我的 div 有黑色边框,但点击后不向上滚动。以下是代码片段:

<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
div {
height: 400px;
width: 400px;
}
</style>
<script>
$(document).ready(function() {
$('div').click(function() {
//alert("hello");
$(this).css('border', '3px solid black');
$(this).animate({
scrollTop: 0
}, 'fast');
});
});
</script>
</head>

<body>
<div id=div1 style="background:yellow"></div>
<div id=div2 style="background:green"></div>
<div id=div3 style="background:red"></div>
<div id=div4 style="background:yellow"></div>
<div id=div5 style="background:purple"></div>
<div id=div6 style="background:orange"></div>
<div id=div7 style="background:gray"></div>
</body>

</html>

最佳答案

如果您想降低元素的高度并最终隐藏它,请使用slideUp:

$('div').click(function () {
$(this).css('border', '3px solid black').slideUp();
});

Hide the matched elements with a sliding motion.

文档:http://api.jquery.com/slideUp/

演示:http://jsfiddle.net/tusharj/05yqqcea/

编辑

如果你想将当前的 div 滚动到顶部:

$('div').click(function () {
$(this).css('border', '3px solid black');
$('html, body').animate({
scrollTop: $(this).position().top
}, 'fast');
});

演示:http://jsfiddle.net/tusharj/05yqqcea/1/

关于javascript - 通过 jQuery 动画点击向上滚动 div(仅限简单的 jquery 代码),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30799617/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com