如何使用jQuery为scrollLeft设置动画？

How to animate scrollLeft using jQuery?

例

您可以尝试运行以下代码，以学习如何使用jQuery设置scrollLeft的动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

$(document).ready(function(){
$('#scrollme').click(function() {
$('html,body').animate({
scrollLeft: $('#demo').css('left')
}, 500, function() {

$('html, body').animate({
scrollLeft: 0
}, 500);

});
});
});

<style>
#demo {
width: 100px;
height: 100px;
background: green;
position: relative;
left: 800px;
}
</style>
</head>
<body>
<p>
<button id="scrollme">Click to scroll left</button>
</p>

</body>
</html>