近日看腾讯、新浪的移动端网站,发现一件非常蛋疼的事情,在列表浏览内容,我往下翻,往下翻,突然,看到一个十分霸气的标题,于是点到文章查看详细内容,若干时间后,点回退按钮,浏览器回退到页面的最顶部了。

  于是就写了这么一个jQery的小插件,当然,写完之后发现PC端的chrome可以记录浏览位置,泪奔

  插件很简单,就是监听浏览器的滚动事件, 通过改变地址栏hash值记录访问位置,方便后退继续往后浏览器内容。

  适用于文章列表。

  使用方法: $('.setHash').BackToHash();

  .setHash为列表元素选择器,需要设置有id或者name属性,如果列表内容会通过ajax追加,请设置参数mayAdd为true,或者在追加完成后调用add方法。

  详细使用可以看demo

github地址:https://github.com/feng524822/BackToHash

jQuery实现 浏览器后退到上次浏览位置的更多相关文章

  1. react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置

    现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...

  2. cookie记住浏览位置

    /*返回上次浏览位置*/ $(function () { var str = window.location.href; str = str.substring(str.lastIndexOf(&qu ...

  3. vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

    vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492   vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...

  4. 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法

    监控浏览器返回功能 判断浏览器返回功能 禁用浏览器的后退按钮 JS禁止浏览器后退键 http://volunteer521.iteye.com/blog/830522/ 浏览器返回功能 判断上一页面来 ...

  5. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  6. javascript怎么禁用浏览器后退按钮

    1. <script language="JavaScript">    javascript:window.history.forward(1); </scri ...

  7. web测试误区:浏览器后退键退出系统会话失效

    通过最近测试的项目,认识到实际:浏览器后退键退出系统,会话仍旧有效.打破了之前认为浏览器后退键就会退出系统登录的认知. 一,了解Cookie和Session的作用,具体来说cookie机制采用的是在客 ...

  8. js禁止Backspace键使浏览器后退

    在项目中遇到按下Backspace键让浏览器后退的问题,上网搜了几种解决方案都不太理想.于是集众人之智,采众家之长,归纳如下: 这里主要参考博客http://q821424508.iteye.com/ ...

  9. js/jquery判断浏览器的方法小结

    在网站前端开发中,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把 ...

随机推荐

  1. 02-线性结构2 Reversing Linked List

    由于最近学的是线性结构,且因数组需开辟的空间太大.因此这里用的是纯链表实现的这个链表翻转. Given a constant K and a singly linked list L, you are ...

  2. python 函数的参数对应

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经接触过函数(function)的参数(arguments)传递.当时我们根 ...

  3. ios 异步处理耗时操作

    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispatch_asy ...

  4. Python学习教程(learning Python)--2 Python简单函数设计

    本节讨论Python程序设计时为何引入函数? 为何大家都反对用一堆堆的单个函数语句完成一项程序的设计任务呢? 用一条条的语句去完成某项程序设计时,冗长.不宜理解,不宜复用,而采用按功能模块划分成函数, ...

  5. 算法系列7《CVN》

    计算CVN时使用二个64位的验证密钥,KeyA和KeyB. 1) 计算CVN 的数据源包括: 主账号(PAN).卡失效期和服务代码,从左至右顺序编排. 4123456789012345+8701+11 ...

  6. hdu 1973 Prime Path

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1973 Prime Path Description The ministers of the cabi ...

  7. EntityFramwork(1) 源地址https://msdn.microsoft.com/zh-cn/data/jj193542

    1.创建应用程序 简单起见,我们将构建一个使用 Code First 执行数据访问的基本控制台应用程序. 打开 Visual Studio "文件"->"新建&qu ...

  8. CoolShell Puzzle攻略[更新隐藏剧情]

    CoolShell博主陈皓做了一个在线的puzzle很有意思,链接在这里,这里记录一下解题的一些步骤. Puzzle 0 ++++++++[>+>++>+++>++++> ...

  9. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  10. 基于.net mvc的校友录(六、codefirst的使用以及班级模块的关键部分实现)

    通过EF将新用户存入数据库 这里,探讨一下如何使用EF的code first将数据存入数据库,以及如何对用户的密码进行md5加密与验证.下面是用户登陆的前台代码. @using (Html.Begin ...