jQuery实现定位滚动条位置
jQuery实现滚动条滚动到子元素位置(方便定位)
关键代码如下所示:
<div class="of-y" id="nurse" > <table class="high width" id="nurse-plan"> <tr id="tr-one"></tr> <tr id="tr-two"></tr> <tr id="tr-three"></tr> <tr id="tr-four"></tr> </table> </div>
jQuery:
$("#nurse").scrollTop($("#nurse").scrollTop() + $('#tr-three').offset().top - $("#nurse").offset().top); --普通 $("#nurse").animate({ scrollTop: $("#nurse").scrollTop() + $('#tr-three').offset().top - $("#nurse").offset().top }, 1000); --有动画效果
以上所述是小编给大家介绍的jQuery实现定位滚动条位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
jquery 点击元素后,滚动条滚动至该元素位置的方法
点击元素后,滚动条滚动至该元素位置: $('a.lead-link').bind('click', function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top - 60 }, 1500); }); 以上这篇jquery 点击元素后,滚动条滚动至该元素位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
使用jQuery判断浏览器滚动条位置的方法
项目背景 webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现.向下滑动,底部导航出现. 遇到问题 1.我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发.因此只能判断滚动条是上滚下滚等.关于手机手势,后面的文章会介绍,欢迎关注! 2.通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,
-
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
最近在忙于jquery的前端开发,学习到很多知识,今天小编给大家带来一段代码片段有关弹出层后禁用滚动条的代码. 具体代码如下所示: $("cli-open").click(function(){ var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置 window.onscroll=function(){ document.body.scrollTop = scrollTop;//赋值给滚动条的位置 } }) $(".cli
-
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位
-
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. 复制代码 代码如下: var container = $('div'), scrollTo = $('#row_8'); container.scrollTop( scrollTo.offset().top - container.offset().top + container.scrollTop() ); // Or you can animate the scrolling: container.animate({
-
jQuery实现根据滚动条位置加载相应内容功能
实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容:向上滚动到相应的内容区域时也重新加载动画内容! 1.实现思路: 先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!). 2.思维草稿图: 向下滚动加载动画判断条件:(代码中addClass()函数) 向上滚动加载动画判断条件:(代码中addCla
-
jQuery判断div随滚动条滚动到一定位置后停止
实现代码: 复制代码 代码如下: <script type="text/javascript">var rollSet = $('#widget'); var offset = rollSet.offset(); var fwidth = $("#footer").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop();
-
jQuery实现将div中滚动条滚动到指定位置的方法
本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div
-
页面刷新时记住滚动条的位置jquery代码
@*点击按钮页面刷新的时候 记住滚动条的位置*@ 复制代码 代码如下: <script type="text/javascript"> window.onbeforeunload = function () { var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode
-
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY
-
jQuery实现滚动条滚动到子元素位置(方便定位)
话不多说,请看代码: <div class="of-y" id="nurse" > <table class="high width" id="nurse-plan"> <tr id="tr-one"></tr> <tr id="tr-two"></tr> <tr id="tr-three"
随机推荐
- ExtJS4的文本框(textField)使用正则表达式进行验证(Regex)的方法
- 详解windows下vue-cli及webpack 构建网站(三)使用组件
- 探究Javascript模板引擎mustache.js使用方法
- Android 获取屏幕高度,标题高度,状态栏高度(实例代码)
- Oracle查看逻辑读、物理读资源占用排行的SQL语句
- 解析asp.net的分页控件
- js如何判断用户是否是用微信浏览器
- PHP全局变量与超级全局变量区别分析
- python分析apache访问日志脚本分享
- JavaScript判断图片是否能够加载,失败则替换默认图片
- c#类的使用示例
- 避免sql注入_动力节点Java学院整理
- 不安装excel使用c#创建excel文件
- Webpack性能优化 DLL 用法详解
- PHP 的 __FILE__ 常量
- Android手势ImageView三部曲 第一部
- 交换机VLAN的配置之二
- Python及PyCharm下载与安装教程
- vue注册组件的几种方式总结
- Vue列表渲染的示例代码