个人博客 地址: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. 【React Native】某个页面禁用物理返回键

    1.引入组件 import { BackHandler, } from 'react-native'; 2.添加监听 componentDidMount(): void { BackHandler.a ...

  2. Elasticsearch之增加和删除索引

    增加索引 利用postMan工具发送restfulAPI添加索引库 请求方式为put代表添加 创建索引index时映射mapping 请求URL: 使用put发送http://localhost:92 ...

  3. Ubuntu18.04安装mysql并配置远程访问

    1.ssh连接到Ubuntu服务器 默认root用户登陆,如果运行以下命令没有权限请在命令开头加sudo 2.安装mysql apt install mysql-server 3.配置mysql my ...

  4. 返回一个整数数组中最大子数组的和——java程序设计

    一.题目要求 1.输入一个整形数组,数组里有正数也有负数.2.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.3.求所有子数组的和的最大值.要求时间复杂度为O(n) 二.设计思想 解决 ...

  5. Eclipse jee最新版国内镜像点下载方式

    Eclipse jee是Eclipse的JavaEE版本,官网服务器在国外,无条件下载的可以使用国内镜像点 清华大学网站镜像网站资料,可用于下载其它版本的Eclipsehttps://mirrors. ...

  6. Mysql字符串截取,去掉时间,匹配日期等于今日

    Mysql字符串截取,去掉时间,匹配日期等于今日 方案一 select time from jsb where date(time)=date(now()); 方案二 ));

  7. mysql将bin-log日志文件转为sql文件

    查看mysqlbinlog版本 mysqlbinlog -V [--version] 查看binlog日志开启状态 show variables like '%log_bin%'; mysql打开bi ...

  8. windows2016_x64搭建ELK(datasource->filebeat->logstash->elasticsearch->kibana)

    windows2016_x64搭建ELK(datasource->filebeat->logstash->elasticsearch->kibana) 本文示例日志程序基于as ...

  9. docker - 如何清理硬盘中无关占用

    背景 在使用docker进行容器化管理后会发现本次硬盘文件占用量在不断上升,并且即使是删除掉容器或者镜像也并不能释放掉对应的硬盘空间.本文将提供对应的docker命令用于真正释放掉该部分应被删除释放的 ...

  10. 关于新版vue-cli安装json-server在build文件里没生成出dev-server文件

    今天在安装json-server时遇到一个问题,build文件里并没有生成dev-server.js文件, 开始是怀疑配置有问题,或者安装不正确,然后重新安装了两三次,还是这样,郁闷.. 通过查询资料 ...