关于使用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)
更多专业前端知识,请上 【猿2048】www.mk2048.com
关于使用JQ scrollTop方法进行滚动定位相关推荐
- 【前端三分钟】锚点自动跟随滚动定位
最近看到写 "锚点自动跟随滚动定位"的方法,大都是基于JQ,或者是第三方. 所以,进行给出使用原生JS的写法. 什么都不说了,直接上代码(使用模块模式方式): <!DOCTY ...
- scrollTop()方法
scrollTop设置滚动条用法 前提 工作中需要做一个点击右侧网元或板卡,左侧topo图滚动到对应位置 用到的知识点 scrollTop(),position(),工作环境中用了Jtopo,Ztre ...
- 导航栏吸顶 vs 滚动定位
需求描述: 实现导航滚动过banner之后吸顶,点击导航后定位到对应模块,滚动到对应模块后导航对应区域实现高亮效果~~~ html+css+js swiper+jq 使用html+swiper实现页面 ...
- 仿微信未读RecyclerView平滑滚动定位效果
效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果 用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱 ...
- vue+element 实现点击左侧树形控件实现右侧滚动定位
树形控件实现定位+平滑滚动(左树形右内容) vue+element 实现点击左侧树形控件实现右侧滚动定位 具体实现代码如下: <template><div class="d ...
- scrollTop方法无效问题
遇到很奇怪的问题本来使用scrollTop方法在电脑上生效.在安卓手机上却没有生效. scrolltop和scrollTo 在安卓上都无效.本地浏览器上没问题. scrollTop参数详情 结果用安卓 ...
- jQuery的操作css的几种方法和位置,尺寸以及scrolltop方法
jQuery操作css jQuery可以通过css方法直接给指定元素查看,更改,添加css样式 <script>$(function () {//jQuery可以通过css方法直接给指定元 ...
- 子组件获取外层组件的scrollTop,达到实时定位的效果
子组件获取外层组件的scrollTop,达到实时定位的效果 需求其实很简单,下面这么设计主要是为了适配其他页面,都可以通过这样的形式拿到内容区域的scrollTop. 最右侧是左侧列表的每一个进度状态 ...
- 深度理解Jquery 中 scrollTop() 方法
这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选 ...
最新文章
- netsh与用法--XP的各种网络命令
- JavaScript基础知识(函数)
- 数学好=编程能力强?MIT新发现:二者激活大脑区域并不同
- python怎么判断一个文件是否存在-python判断文件是否存在的方法
- [python]pythonic的字典常用操作
- Android 数据存储之文件存储小记
- python判断今天周几_Python如何根据日期判断周几
- knn算法python代码_在python中使用KNN算法处理缺失的数据
- Hive表中修改列位置,更改类型、移动位置(impala支不支持更改位置)
- adb for linux 工具包,Linux(Ubuntu)下配置安装adb工具
- SolidWorks2016 从入门到入坟 下载安装+画图
- 《算法设计与分析》黄宇编著 课后习题参考答案
- Echarts绘制中国地图
- python量化需要什么基础_真格量化入门课程——②真格量化Python策略编写思路
- 泰戈尔《园丁集》选段
- 【变色龙】app封装系统源码+互站在售封装系统
- 职场“巨婴”,毁人不倦
- 兴华永恒公司CSO仙果:Flash之殇—漏洞之王Flash Player的末路
- 计算机硬件数据统计实验报告,实验二数据统计01
- GAN学习历程之CycleGAN论文笔记
热门文章
- pks系统如何添加服务器,pks服务器的上电步骤.pdf
- 由对称性知定点一定在x轴上_线上优秀教学案例(九)|计算机科学与工程学院刘钊:“延期不延教”之“1+X课堂”...
- 禅道开源版用户手册_Docker搭建开源版禅道以及项目基本流程介绍
- python大文件排序_python实现按创建时间对文件排序
- mui的学习图片预览
- 解决在html中引入font-awesome的css文件后, 图标显示不出来
- [Android] websocket客户端开发
- SQL2000中@@ERROR的使用提醒
- 安装phpssdb扩展:
- arm opcode hook