使用 jQuery 動畫在點擊時向上滾動 div（僅限簡單的 jquery 代碼）
[英]Scroll up div on clicks with animation by jQuery (simple jquery code only)
問題描述
我試圖在點擊時滾動一個 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>
2 個解決方案
解決方案1
1 已采納 2015-06-12 09:25:36
如果要降低元素的height並最終隱藏它，請使用slideUp ：
$('div').click(function () {
$(this).css('border', '3px solid black').slideUp();
});
用滑動動作隱藏匹配的元素。
文檔： 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');
});
解決方案2
0 2015-06-12 09:32:52
你需要滾動身體而不是 div，試試這個fiddle 。
$(document).ready(function () {
$('div').click(function () {
//alert("hello");
$(this).css('border', '3px solid black');
$('body').animate({
scrollTop: 0
}, 500);
});
});
Div向下滾動並使用jquery向上滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.