首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery滚动到页面指定位置

    文章作者:Tyan 博客:noahsnail.com         在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍...jQuery函数中的一个小trick,.focus()函数。         ...先来看一下jQuery的官方文档:         上面的文档扯了一堆,半点没看到页面跳转的影子,但是在实际应用中你会发现,如果一个控件调用了.focus()方法,页面会自动跳转到控件所在位置。         ...举例说明:         如图,这是一个pop up,modal,如果你选中了某一条数据,你想再打开这个pop up时页面直接跳转到选中的这条数据的位置,用.focus()可以这么写: $('input...注:focus方法使用有个前提,那就是控件不能是disabled,如果控件要设为disabled,那要在控件被disabled之前调用focus方法。 感谢教我这个小trick的Lucas!

    8.8K20

    解决浏览器差异导致从子页面回到父页面,父页面不刷新的问题

    概述:   在做H5混合开发的时候总是会遇到浏览器差异、不兼容导致同样的代码,IOS和Andoird其中之一出现不可预见的问题。   ...我的问题也是如此,我的需求是从父页面跳转子页面,子页面提交后返回父页面,并且父页面刷新。   ...Android的Chrome浏览器对这个需求就很容易支持,因为他每次页面重新显示的时候,都会刷新整个页面。而IOS的Safari浏览器出现了问题,Safari浏览器会读取缓存,不会重新刷新页面。...总体思路是在子页面返回时,告知父页面刷新。并且只在IOS上执行这个操作,否则Android会刷新两遍。   ...最后发现是承载Html的IOS原生壳用了新的wkWebview导致,换回以前的WebView成功解决。

    3.3K20

    touch-action导致安卓页面无法滚动

    后续会补充一篇使用这个特性做出来的效果。...就是ios基本都可以的,但是安卓中的页面滚动都没了。这是为什么呢?这个就要看下touch-action的更官方的触摸说明了。 默认情况下,平移(滚动)和捏手势由浏览器独占处理。...文档参考来源:touch-action 说人话 这段话阐明的就是触摸事件整个的进行过程,既然它可以通过css来约定滚动的行为,那么就意味着你写了touch-action:none,就会导致原来的页面滚动失效了...这就是安卓上无法页面滚动的原因。 为什么ios没有受影响呢,我觉得可能是ios默认支持touch事件的原因吧。如果你知道底层的原因或者详细的文档说明,可以告诉我哦。...更多 说明:如果你想更好的使用滚动相关的体验,还是入手框架吧,不然坑太多,iscroll,better-scroll(一般滚动组件依赖的库).me-scroll(个人推荐)都是不错的选择 – 安利一篇还不错的采坑文章

    4.6K00

    分享一款jQuery全屏滚动页面特性案例

    分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。...这样的页面有很多,如:iPhone 5C页面:http://www.dowebok.com/demo/2014/77/index8.html  网易邮箱6.0:http://www.dowebok.com...实现滚屏翻页效果 jquery/1.10.2/jquery.min.js...纵向定位滚屏特效代码,是个人业余兴趣爱好写的,是基于jquery一个特效,没有任何封装,只是提供一种思考方式和实现方法,代码共享可随便使用,可能存在bug,但本人不承担任何修复bug的责任。...= function(){ goTo.each(function(){ $(this).height( $(window).height() ) }); } resetFun(); //屏幕滚动

    5K30

    页面滚动,元素跳动;附带jquery.scrollex.js插件

    有些动画是页面一加载就要的,还有一些动画是需要页面滚动到那个元素才要展示的。 本文以模板之家的 “全屏Story日记本个人主页自适应模板”为例,解析这两种动画实现的方式之一。...滚动到要实现动画的元素时(is-inactive): 其实和上面的意思一样: 在未滚动到该元素时,显示假位置。...当滚动到该元素时,去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件 二、使用方法 要使用这个...jQuery插件,需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。..." src="js/jquery.scrollex.js"> 调用插件 在页面DOM元素加载完毕之后,你可以通过scrollex()方法来初始化插件。

    7K11

    控制页面的滚动:自定义下拉到刷新和溢出效果

    使用该案例包括禁用移动设备上的“拉动到刷新”功能,消除过度滚动发光和橡皮筋效果,并防止页面内容在模态/叠加层下滚动 背景 滚动边界和滚动链接 滚动是与页面交互的最基本的方式之一,但是由于浏览器的诡异默认行为...你可以使用它来取消滚动链接,禁用/自定义拉动到刷新操作,禁用iOS上的橡皮圈效果(当Safari实现超滚动行为时)等等。...最好的部分是,使用overscroll行为不会对页面性能产生负面影响 该属性有三个可能的值 auto - 默认,源于元素的滚动可能会传播给祖先(父级)元素 contain - 防止滚动链接。...示例 - 带和不带过度滚动行为的模态:包含 ? ? (左边之前:页面内容在叠加层下滚动,右边之后:页面内容不会在叠加层下滚动) 禁用拉到刷新 关闭pull-to-refresh操作是一行CSS。...,相当于是阻止事件的冒泡,当然阻止滚动链接在页面上有水平方向的,也有垂直方向的,垂直方向上设置overscroll-behavior-y:none:时可在下拉滚动时禁用反弹效果(橡皮筋效果) 当然文中的刷新动画效果是

    4.6K20

    使用 meta 实现页面的定时刷新或跳转

    这部分的内容主要来源自:《小tip: 使用meta实现页面的定时刷新或跳转》。...meta 源信息功能之页面定时跳转与刷新 几乎所有的网页头部都有源信息。...就是我们网页平时跳转,还可以使用 实现,下面几个典型代码示例: 这个表示当前页面每5秒钟刷一下,刷一下~ 页面直接跳转到腾讯网~ 所以,当我们下次遇到“登录成功,正在跳转到您之前访问页面……”的时候,可以使用的这个refresh刷新,跳转功能...大家可以看到,meta 跳转,使用方便,不用写 JS,不用会后台代码,定时跳转刷新什么的玩得照样很溜,而且兼容性好,为啥总感觉不温不火,很少看见有人提及呢?

    1.1K10

    jQuery scroll()方法:页面滚动到一定位置触发事件返回顶部

    说在前面: 在日常工作中难免会遇到一些滚动事件的应用,页面滚动到一定位置显示 返回顶部 按钮,header 头部 fixed 固定等,这时候就可以使用 scroll() 方法来实现我们的需求。...定义和用法 当用户滚动指定的元素时,会发生 scroll 事件。该事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。...语法: $(selector).scroll() 应用: 我们监听滚动事件,放滚动到 400px 时,出发显示返回顶部标签,然后给该标签,绑定一个事件,点击返回顶部。...function() {         $(window).scroll(function() {             var scroHei = $(window).scrollTop();//滚动的高度

    7.5K30
    领券