欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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
  });
  
});