解决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 ...
随机推荐
- centos 记录所有用户操作命令的脚本
使用history不能看到所有用户的命令记录,如何看所有用户的操作记录. 如下: 在 /etc/profile 最下面加入如下代码即可. PS1="`whoami`@`hostname`:& ...
- python-21-生成器又是什么东西?
前言 生成器,只要含有yield关键字的函数都是生成器函数,但yield不能和return共用且需要写在函数内. 生成器,是返回一个迭代器的函数,说白了生成器也是迭代器. 一.生成器简介 1.只要含有 ...
- Binder 原理整理
linux进程间通信方式 1. 管道 管道的实质是一个内核缓冲区,管道的作用正如其名,需要通信的两个进程在管道的两端,进程利用管道传递信息.管道对于管道两端的进程而言,就是一个文件,但是这个文件比较特 ...
- 【Android】WebDav For Android
最近在写一个云备份功能,参考了一下市面上的软件,发现有一种采用WebDav协议的云备份成本比较低,故特地研究一下使用. 服务器提供商是使用国内的坚果云,还是非常良心的. 坚果云官网:https://w ...
- fatal: HttpRequestException encountered
报错:fatal: HttpRequestException encountered 解决方法 Github 禁用了TLS v1.0 and v1.1,必须更新Windows的git凭证管理器,才行. ...
- Bounce 弹飞绵羊 HYSBZ - 2002 分块
//预处理出以这个点为起点并跳出这个块的次数和位置 //更新一个点的弹力系数可以只更新这个点以及这个块内之前的点 #include<stdio.h> #include<algorit ...
- Android View的事件分发机制探索
概述 Android事件传递机制也是Android系统中比较重要的一块,事件类型有很多种,这里主要讨论TouchEvent的事件在framework层的传递处理机制.因为对于App开发人员来说,理解f ...
- SpringBoot图文教程6—SpringBoot中过滤器的使用
有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文系列教程技术大纲 鹿老师的Java笔记 SpringBo ...
- 【Asp.net】 七大内置对象
本文主要分析Asp.net的7大内置对象. 利用提供的内置对象可以实现页面之间的数据传递和一些特定的功能,如数据输出,页面重定向等.5个核心常用内置对象分别是Application,Session, ...
- 面试官:说说TCP和UDP的区别和应用场景
原创文章首发于公众号:「码农富哥」,欢迎收藏和关注,如转载请注明出处! 上一篇聊完 一文彻底搞懂 TCP三次握手.四次挥手过程及原理 这次聊聊TCP和UDP的区别和场景 TCP/IP 中有两个具有代表 ...