JQ返回顶部的方法
程序员文章站
2022-05-03 23:54:03
...
在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
});
});