JQ返回顶部的方法

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

猜你喜欢

转载自blog.csdn.net/weixin_42553164/article/details/83245013