解决jquery.pjax加载后的异常滚动
个人博客 地址:http://www.wenhaofan.com/article/20181106154356
在使用jquery.pjax的时候发现每次加载完成后都会将滚动条滚动至顶部,用户体验极不友好,但是pjax实际上是用的异步加载html,浏览器也不会对点击事件进行操作,于是猜测是在代码中操作了滚动条,于是全局搜索
scrollTop
找到了以下代码
if (hash) {
var name = decodeURIComponent(hash.slice(1))
var target = document.getElementById(name) || document.getElementsByName(name)[0]
if (target) scrollTo = $(target).offset().top
}
if (typeof scrollTo == 'number') $(window).scrollTop(scrollTo)
该代码在340行左右,在这里我们可以看见pjax在加载完成后会检查url hash是否为空,如果为空则获取锚点,然后滚动到锚点所在的位置,但是当url hash为空的时候,scrollTo值也依然为0,于是就直接将滚动条滚动到了顶部,这就非常蛋疼了,一般情况下在异步加载完成后我们并不需要滚动条滚动至顶部,所以这个操作异常bug,极其影响体验。
解决方法也很简单,仅需将 if (typeof scrollTo == 'number') $(window).scrollTop(scrollTo)移动至if代码块中,让它仅在设置锚点时操作滚动条。
解决jquery.pjax加载后的异常滚动的更多相关文章
- 解决jQuery load()加载GB2312页面时出现乱码
jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. 这是jQueryAJAX.html <!DOCTYPE html PUBLIC "-// ...
- jquery实现移动端页面加载后,向上滚动指定距离无效引起的探索
效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错, 也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...
- jQuery 页面加载后执行的事件(3 种方式)
刚刚工作,没怎么用过 jQuery.今天在工作中遇到一个 jQuery 问题,页面加载的时候需要触发函数,第一直觉告诉我应该写成 onload(),结果不是.后来查了文档发现是 load(),但是版本 ...
- jquery——ajax加载后的内容,单击事件失效
使用delegate(),on()绑定事件,可以将事件绑定到其祖先元素上,这样以后加载出来的元素,单击事件仍然有效
- jquery datagrid加载后仅选定第一行
function onLoadSuccess(data) { var rows = $("#DataGrid").datagrid("getRows"); if ...
- jQuery页面加载后执行的事件(3种方式)
$(function () { }); $(document).ready(function () { }); window.onload = function () { }
- jquery预加载的几种方式
实际编写前端页面时,有时候希望一打开某个页面就加载一些方法.下面是4种预加载方法. ①页面加载完之前执行,与嵌入的js加载方式一样(写jquery插件的时候使用) (function ($) { al ...
- jquery预加载的几种例子
实际编写前端页面时,有时候希望一打开某个页面就加载一些方法.下面是4种预加载方法. ①页面加载完之前执行,与嵌入的js加载方式一样(写jquery插件的时候使用) (function ($) { al ...
- unobtrusive验证,ajax局部加载后验证失效解决方法
页面加载后运行此代码 $(function() {$.validator.unobtrusive.parse($("form")); }); 原因: 页面加载后unobtrusiv ...
随机推荐
- PostgreSQL将日期转为当前年、月、日的函数date_trunc
PostgreSQL将日期转为年.月.日的函数date_trunc: 当前年: select date_trunc('year',now()) 当前月: select date_trunc('mo ...
- .net core 3.1 webapi后端接收钉钉小程序post的文件/图片
世上本没路:走的人多了,便成了路. dd.uploadFile({ url: '请使用自己服务器地址', fileType: 'image', fileName: 'file', filePath: ...
- opencv —— getRotationMatrix2D、warpAffine 仿射变换实现图像旋转缩放
仿射变换的基本概念 仿射变换是一种二维坐标(x, y)到二维坐标(u, v)的线性变换,其数学表达式形式如下: 对应的齐次坐标矩阵表示形式为: 仿射变换保持了二维图形的“平直性”(直线经仿射变换后依然 ...
- PHP0014:PHP操作文件
查看源代码 用这种方式抓取网页,和原始网页一模一样. 数组不能用echo 将一个网页保存到本地html文件
- redis缓存优化
redis缓存优化 一.问题 在Javaweb项目中,如果每次刷新,所有资源都重新从数据库中读取,这样每次效率会很低,在这里可以使用redis非关系型数据库,将一些不经常变化得资源加载进内存中.提高效 ...
- 使用TableHasPrimaryKey或TableHasForeignKey来知道表是否有主键或外键
从下面2句SQL语句执行来看, 就知道那一张表有主键PrimaryKey或ForeignKey. 比如,表[Q]和[QQ]既没有主键,也没有外键. 当在SQL语句的条件中,使用“=”,那说明查询出来的 ...
- android中常用的布局管理器(二)
接上篇博客 (3)LinearLayout 线性布局管理器 线性布局管理器是将放入其中的组件按照垂直或水平方向来布局,每一行或每一列只能放一个组件,并且不会换行,当组件排列到窗体的边缘后,后面 ...
- PHP MySQLi Prepared Statements Tutorial to Prevent SQL Injection
https://websitebeaver.com/prepared-statements-in-php-mysqli-to-prevent-sql-injection#introduction On ...
- 轻量级RPC设计与实现第三版
在前两个版本中,每次发起请求一次就新建一个netty的channel连接,如果在高并发情况下就会造成资源的浪费,这时实现异步请求就十分重要,当有多个请求线程时,需要设计一个线程池来进行管理.除此之外, ...
- oracke数据库分区新增
1.发现一些过程执行报错,报错原因是'ora-14400插入的分区关键字未映射到任何分区',原来是2020年库表的时间子分区未扩展: 2.扩展子分区的语句是 ALTER TABLE 表名 MODIFY ...