JQ返回顶部的方法

最新推荐文章于 2022-05-12 17:10:29 发布

Akiode

最新推荐文章于 2022-05-12 17:10:29 发布

阅读量8k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42553164/article/details/83245013

版权

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

Akiode

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQ返回顶部的方法

在JS中，我们返回顶部的方法有，在顶部的元素设置id，然后超链接目的为id就能返回顶部&lt;html&gt;&lt;div id="top"&gt; &lt;/div&gt; //最顶部的元素 n 行内容&lt;a href="#top"&gt;&lt;/a&gt; //超链接的目标是id为to
复制链接

扫一扫