个人博客 地址: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加载后的异常滚动的更多相关文章

  1. 解决jQuery load()加载GB2312页面时出现乱码

    jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. 这是jQueryAJAX.html <!DOCTYPE html PUBLIC "-// ...

  2. jquery实现移动端页面加载后,向上滚动指定距离无效引起的探索

    效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错,   也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...

  3. jQuery 页面加载后执行的事件(3 种方式)

    刚刚工作,没怎么用过 jQuery.今天在工作中遇到一个 jQuery 问题,页面加载的时候需要触发函数,第一直觉告诉我应该写成 onload(),结果不是.后来查了文档发现是 load(),但是版本 ...

  4. jquery——ajax加载后的内容,单击事件失效

    使用delegate(),on()绑定事件,可以将事件绑定到其祖先元素上,这样以后加载出来的元素,单击事件仍然有效

  5. jquery datagrid加载后仅选定第一行

    function onLoadSuccess(data) { var rows = $("#DataGrid").datagrid("getRows"); if ...

  6. jQuery页面加载后执行的事件(3种方式)

    $(function () { }); $(document).ready(function () { }); window.onload = function () { }

  7. jquery预加载的几种方式

    实际编写前端页面时,有时候希望一打开某个页面就加载一些方法.下面是4种预加载方法. ①页面加载完之前执行,与嵌入的js加载方式一样(写jquery插件的时候使用) (function ($) { al ...

  8. jquery预加载的几种例子

    实际编写前端页面时,有时候希望一打开某个页面就加载一些方法.下面是4种预加载方法. ①页面加载完之前执行,与嵌入的js加载方式一样(写jquery插件的时候使用) (function ($) { al ...

  9. unobtrusive验证,ajax局部加载后验证失效解决方法

    页面加载后运行此代码 $(function() {$.validator.unobtrusive.parse($("form")); }); 原因: 页面加载后unobtrusiv ...

随机推荐

  1. Python爬虫实战教程:爬取网易新闻;爬虫精选 高手技巧

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. stars声明很多小伙伴学习Python过程中会遇到各种烦恼问题解决不了.为 ...

  2. Play! 1.x 访问远程web

    本文参考 Play Framework 控制层发起HTTP请求 (Send Http Request In Controller) 参考连接地址:http://blog.csdn.net/fhzait ...

  3. 嵌入式设备sqlite库移植和使用

    1]官网下载sqlite-autoconf-3300100.tar.gz,网址https://www.sqlite.org/download.html,2]解压:tar zxvf sqlite-aut ...

  4. 纪中17日T2 2322. capacitor

    2322. capacitor (File IO): input:capacitor.in output:capacitor.out 题目描述 输入 输出 样例输入 样例输出 数据范围限制 Solut ...

  5. D. Domino for Young

    基本思想是利用涂色的方法,用黑白两种颜色把方格全部涂色,相邻方格不同色. 方法1:基于二分图匹配的思想 一开始也想过二分图匹配,但数据量太大,就放弃了这种想法.其实根据增广路的定义.如果白色的方格的数 ...

  6. js阻止事件冒泡(phpcms,浮窗第一次10秒弹出后每30秒弹出,动态更换日期)

    /* v9_date_list 日期表 tiptime 考试日期(数据类型为日期) 如果要实现浮窗淡入淡出用jquery的("#main0").fadeIn(3500);淡出(&q ...

  7. C++中复制构造函数被调用的三种情况

    C++中的构造函数 c++中的构造函数分为构造函数,和复制构造函数,相比于构造函数,复制构造函数使用更加方便,快捷.构造函数可以有多个,二复制构造函数只能有一个,因为复制构造函数的参数只能是当前类的一 ...

  8. 11maven的聚合

    我们都知道项目之间的依赖首先要把被依赖的项目先安装install到maven的本地仓库中,然后在本项目中配置被依赖的仓库坐标,才能进行依赖通信. 例如: A项目 >  B项目 A项目依赖B项目中 ...

  9. jQuery笔记(三)jQuery中的事件

    ; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1 ...

  10. ASP.NET MVC5----数据注解和验证

    在使用MVC模式进行开发时,数据注解是经常使用的(模型之上操作),下面是我看书整理的一些常见的用法. 什么是验证,数据注解 验证 从全局来看,发现逻辑仅是整个验证的很小的一部分.验证首先需要管理用户友 ...