个人博客 地址: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. mysql随机抽取数据

      -- 慢 ; -- 较慢 SELECT * FROM `table` WHERE id >= (SELECT floor( RAND() * ((SELECT MAX(id) FROM `t ...

  2. centos7系统启动流程

    前提:pc主机,MBR架构 第一步:post(power on system test)加电自检. pc机的主板上有个rom芯片(CMOS),加电后,cpu去找这个raw,然后读取里面的指令,检测机器 ...

  3. 安装npm install时,长时间停留在fetchMetadata的解决方法

    安装npm install时,长时间停留在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch处, ...

  4. 笔记本磁盘中OEM分区的使用

    (1).开机进入系统前,按F8,进入Windows 10的高级启动选项,选择“修复计算机”. (2).选择键盘输入方法. (3).如果有管理员密码,需要输入:如果没有设置密码,直接“确定”即可. (4 ...

  5. js Dom为页面中的元素绑定键盘或鼠标事件

    html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...

  6. vscode侧边栏字体大小修改

    1.找到安装路径下,workbench.desktop.main.css 文件 C:\z_my_install\Microsoft VS Code\resources\app\out\vs\workb ...

  7. [译]C# 7系列,Part 10: Span<T> and universal memory management Span<T>和统一内存管理

    原文:https://blogs.msdn.microsoft.com/mazhou/2018/03/25/c-7-series-part-10-spant-and-universal-memory- ...

  8. Python学习笔记一:变量、函数

    变量.函数是Python语言的最基本单元,下面是我作为初学者的当前理解,随着学习的深入今后会做刷新. 变量:表示操作对象是谁. 变量的方法:表示能做什么事情. 如何设计变量:先分析需要解决的问题,基于 ...

  9. 轻量级RPC设计与实现第四版

    在本版本中引入了SPI机制,关于Java的SPI机制与Dubbo的SPI机制在以前的文章中介绍过. 传送门:Dubbo的SPI机制与JDK机制的不同及原理分析 因为设计的RPC框架是基于Spring的 ...

  10. Java安全笔记

    前言 后端接口开发中,涉及到用户私密信息(用户名.密码)等,我们不能传输明文,必须使用加密方式传输.这次政府项目中,安全测试组提出了明文传输漏洞,抽空研究了下Java加解密相关知识,记录下. 散列函数 ...