JQ返回頂部的方法
阿新 • • 發佈：2018-12-16
在JS中，我們返回頂部的方法有，在頂部的元素設定id，然後超連結目的為id就能返回頂部
<html>
<div id="top"> </div> //最頂部的元素
n
行
內
容
<a href="#top"></a> //超連結的目標是id為top的元素
</html>而在JQuery中，我們可以用scrollTop()方法來返回頂部
scrollTop() 方法返回或設定匹配元素的滾動條的垂直位置。
scroll top offset 指的是滾動條相對於其頂部的偏移。
如果該方法未設定引數，則返回以畫素計的相對滾動條頂部的偏移
語法
$(selector).scrollTop(offset)
------------------------------
selector:選擇的DOM
offset:規定相對滾動條距離頂部的偏移，以畫素計例子
------返回頂部的例子------------ <script type="text/javascript" src="/jquery/jquery.js"></script> //記得用JQuery要先引入檔案哦 <script > $(document).ready(function(){ $('.btn1').click(function(){ $("div").scrollTop(0); //設定滾動條距離div的頂部為0px,滾動條是誰的就選誰 }); }); </script> -----------顯示距離頂部偏移量----------- $(document).ready(function(){ $('.btn1').click(function(){ alert($(div).scrollTop() + " px") //返回距離頂部的偏移量，單位為px }); });
用animate方法的例子
$(document).ready(function(){
$(".btn1").click(function(){
$("div").animate({scrollTop:0},3000); //執行animate動畫，3秒後scrollTop屬性值為0
});
});