个人博客 地址: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. Android布局管理器-从实例入手学习相对布局管理器的使用

    场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797 ...

  2. 彻底理解Windows认证1

    彻底理解Windows认证 一.Windows本地认证 1. 我的密码在哪里? 路径:C:\Windows\System32\config\SAM 当我们登录系统的时候,系统会自动的读取SAM文件中的 ...

  3. 解决Python3.7安装pygame报错You are using pip version 10.0.1, however version 19.1 is available.

    背景: 学习python开发中,需要用到pygame插件,因此按照参考书<Python编程实践,从入门到实践>指引安装Pygame包. 但是利用pip 命令安装 .whl 文件时,报错(如 ...

  4. 初识Idea,部署Maven项目常见问题解决方案

    一.idea 中项目右键没有run命令选项,没有maven的clean与install选项 解决方案:安装Maven Helper插件 二.Idea不识别java文件(类文件显示橙色) 解决方案: 第 ...

  5. 通过/dev/mem操作物理内存

    /dev/mem设备可以用来访问物理内存.下面一段应用程序的代码,实现了通过/dev/mem对物理内存空间中SRAM1的访问. #include <stdio.h> #include &l ...

  6. MVC5+EF6入门完整教程7:排序过滤分页

    https://www.cnblogs.com/miro/p/4134241.html 前置准备 – 应用之前样式,增加测试数据 界面样式修改前: 下面对Views --> Account -- ...

  7. [Python]PyCharm在创建py文件时自动添加头部注释

    在Pycharm主界面找到 File ----->> Setting ----->> Editor ----->> File and Code Templates ...

  8. layui弹出表单提交后,界面model验证部分起作用

    情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...

  9. Wannafly Winter Camp 2020 Day 5C Self-Adjusting Segment Tree - 区间dp,线段树

    给定 \(m\) 个询问,每个询问是一个区间 \([l,r]\),你需要通过自由地设定每个节点的 \(mid\),设计一种"自适应线段树",使得在这个线段树上跑这 \(m\) 个区 ...

  10. KindEditor配置和使用

    1下载kindeditor包,目前最新版本是kindeditor-3.5.5.下载地址:http://www.kindsoft.net/ 2.解压之后,解压目录kindeditor如下图所示. 3.开 ...