滚动条

前言：一个关于滚动条的小练习，包括显示滚动条的位置，置顶，置底
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>滚动条</title>
 6     <script src="../base/jquery-3.1.0.js"></script>
 7     <style>
 8         pre {
 9             font-size: 100px;
10         }
11 
12         button {
13             position: fixed;
14             top: 100px;
15         }
16     </style>
17 </head>
18 <body>
19 <button id="btn">点击显示距离</button>
20 <pre>附近还上课的恢复速度快发生的回复速度快粉红色扩到案发哈夫
21     按时到合肥奥斯卡上发卡上的发哈收款方奥斯卡的发挥恢复速度快
22     发生的回复速度快粉红色扩到案发哈夫
23     按时到合肥奥斯卡上发卡上的发哈收款方恢复速度快发生的回复
24     速度快粉红色扩到案发哈夫
25     按时到合肥奥斯卡上发卡上的发哈收款方恢复速度快发生的回复速
26     度快粉红色扩到案发哈夫
27     按时到合肥奥斯卡上发
28     卡上的发哈收款方恢复速度快发生的回复速度快粉红色扩到案发哈夫
29     按时到合肥奥斯卡上发卡上的发哈收款方</pre>
30 <script>
31     $("#btn").click(function () {
32 //        显示滚动条位置
33 //        console.log($("body").scrollTop());
34 
35 //        置顶！d=====(￣▽￣*)b
36 //        $('body,html').animate({scrollTop:0},1000);
37 
38 //        置底
39 //        $("body,html").animate({scrollTop:$(document).height()+"px"},1000);
40     });
41 
42 </script>
43 </body>
44 </html>