zoukankan      html  css  js  c++  java
  • 关于使用JQ scrollTop方法进行滚动定位

    没图我说个锤子,先来个自拍镇楼。

    又到了每周周五总结时间。我广州刘德华又来讲故事了。这一周没啥任务,就一个任务,产品口头交代了两句,也没有psd没有设计图没有样式。自由发挥,你自己敲代码做个作品出来。

    what?听到这个的时候我是一脸懵逼。我心里很慌,难道我资深射鸡湿和灵魂画家的身份暴露了?心里不禁感叹,唉,是金子哪里都会发光。

    扯太远了,先来总结一下今天要写的东西吧。jquery的scrollTop方法这是啥子,那就先来一波自我介绍

    1、scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

    2、scroll top offset 指的是滚动条相对于其顶部的偏移。

    如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。直接上例子吧

    $(document).ready(function(){
      $("button1").click(function(){
        $("body").scrollTop(100);
      });
    });

    这个东西其实很常见,比如在浏览页面时,页面有5大块。那么你想直接从第一块跳转到第5块浏览,那么这个东西就可以用了,在scrollTop方法中设置一个参数,也就是选中元素距离页面顶部的距离。

    上面的代码,当我们点击button1时,页面会往下移动100px;那换成div呢,其实是一样的。就是滚动条往下走100px。

    还有就是在网页中有很多返回顶部按钮,通过这个方法也可以实现

    $('body,html').animate({scrollTop:0},500),这里结合了animate()方法,另一种则是$(window).scrollTop(0)

  • 相关阅读:
    css中属性继承性总结
    CSS3属性transform(变形),transition(过渡),animation(动画)
    js中的addEventListener
    CSS换行:word-wrap、word-break和text-wrap差别以及 控制文本行数
    js取变量名的规则
    瀑布流布局及其原理
    利用chrome浏览器调试js断点
    return用法
    行内标签和块级元素有哪些
    2019年思岚科技第三季度大事记
  • 原文地址:https://www.cnblogs.com/xzhan/p/9342168.html
Copyright © 2011-2022 走看看