解决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 ...
随机推荐
- AndroidStudio修改默认C盘配置文件夹(.android.gradle.AndroidStudio)以及修改后避免踩的坑
场景 AndroidStudio下载安装教程(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103672471 在上 ...
- Escape(反思与总结)
题目描述: BH is in a maze,the maze is a matrix,he wants to escape! Input: The input consists of multiple ...
- PMP--2.2 效益管理计划
一.文件背景概述 1. 所需文件/数据 制定效益管理计划需要使用商业论证和需求评估中的数据和信息,例如,成本效益分析数据. 成本效益分析数据是在商业论证和需求评估中得到的,在成本效益分析中已经把 ...
- Linux 防SSH暴力攻击
在下这几天发现我的VPS 总是莫名遭受到 江苏镇江那边的IP 登录请求攻击 ,跟踪了下路由,发现ip是从蒙古那边出去的,然后意识到可能是有扫描端口的.. 方法一: 现在的互联网非常不安全,很多人没事就 ...
- findContours()函数
函数原型 findContours(InputOutputArray image, OutputArrayOfArrays contours, OutputArray hierarchy, int m ...
- 一、threejs————灯光阴影
threejs设置阴影有三个注意点 1.只有支持阴影的灯光才可以 pointLight,spotlight,directionallight 2.添加摄像机辅助器 THREE.CameraHelper ...
- Qt实践基础-简单的登录界面的实现
主要代码的实现: 1.为了更好的实现界面的组织,采用C++直接构建UI 2.登录多次密码错误则断开“确认”按钮的链接 3.注意理解static变量的应用 4.QString类的使用更像继承了strin ...
- SpringBoot整合NoSql--(二)MongoDB
简介: MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是 ...
- 通俗易懂的RESTful API实践详解(含代码)
来源:点击进入 点击上方链接,版面更好 一.什么是RESTful REST 是面向资源的,这个概念非常重要,而资源是通过 URI 进行暴露,URI 的设计只要负责把资源通过合理方式暴露出来就可以了,对 ...
- 20200228 尚硅谷-NIO
尚硅谷-NIO Java NIO简介 Java NIO(New IO.Non Blocking IO)是从Java1.4版本开始引入的新的 IO API,可以替代标准的 Java IO API. NI ...