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); --有动画效果

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 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> <t

  • jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)

    最近在忙于jquery的前端开发,学习到很多知识,今天小编给大家带来一段代码片段有关弹出层后禁用滚动条的代码. 具体代码如下所示: $("cli-open").click(function(){ var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置 window.onscroll=function(){ document.body.scrollTop = scrollTop;//赋值给滚动条的位置 } }) $(".cli

  • 使用jQuery判断浏览器滚动条位置的方法

    项目背景 webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现.向下滑动,底部导航出现. 遇到问题 1.我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发.因此只能判断滚动条是上滚下滚等.关于手机手势,后面的文章会介绍,欢迎关注! 2.通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,

  • 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 点击元素后,滚动条滚动至该元素位置的方法

    点击元素后,滚动条滚动至该元素位置: $('a.lead-link').bind('click', function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top - 60 }, 1500); }); 以上这篇jquery 点击元素后,滚动条滚动至该元素位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery实现根据滚动条位置加载相应内容功能

    jQuery实现根据滚动条位置加载相应内容功能

    实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容:向上滚动到相应的内容区域时也重新加载动画内容! 1.实现思路: 先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!). 2.思维草稿图: 向下滚动加载动画判断条件:(代码中addClass()函数) 向上滚动加载动画判断条件:(代码中addCla

  • 页面刷新时记住滚动条的位置jquery代码

    @*点击按钮页面刷新的时候 记住滚动条的位置*@ 复制代码 代码如下: <script type="text/javascript"> window.onbeforeunload = function () { var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode

  • jQuery判断div随滚动条滚动到一定位置后停止

    实现代码: 复制代码 代码如下: <script type="text/javascript">var rollSet = $('#widget');    var offset = rollSet.offset();    var fwidth = $("#footer").height();    $(window).scroll(function() {        var scrollTop = $(window).scrollTop();  

  • 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中滚动条滚动到指定位置的方法

    本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

随机推荐