`
yangsongjing
  • 浏览: 248147 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

javascript记录页面位置,切换回来时依然停留在开始访问的地方

阅读更多
1、如果你的你有很多的页面,那么在访问当前页面的时候,中途又去看了别的页面,那么怎么让你返回的时候使页面依然停留在开始访问的位置呢?这里我用到的是scroll.
首先是写一个公共的记录页面滚动的方法可以理解为java里面的接口:

scroll=(function(){
  var list =[];
  $(window).scroll(function(){
     for (var i=0;i<list.length;i++){
         if(list[i].scroll){
             list[i].scroll(this.scrollY);
         }
     }
  });
  return {
     addListener:function(page){
        list.push(page);
     }
     removeListener: function (page) {
for(var i = 0, len = list.length; i < len; i++) {
    if(list[i].name == page.name) {
    list.splice(0, i);
        }
     }
  };
})();

2、公共的scroll方法写好了,怎么去调呢?
这个就要注入到每个page里面去了,这样页面滚动的时候无论是哪个页面都知道此时页面在滚动。
scroll.addListener(this); 通过scroll调里面的addlistener方法把当前页面放到里面。
3、现在每个页面都能知道页面发生滚动了,并且也知道页面滚动的距离,我们要做的就是判断滚动的页面是否是当前页面,如果是我们就把滚动的值存到当前页面,下次显示的时候用scrollTo(value,value)
让它显示的时候正好停留在上次访问的地方。
scroll: function(scrollY) {
    var cur_page = $.phonegap.pageManage.activityPage;   // 组
   
    if($.phonegap.pageManage.page(cur_page).isGroup) {
    cur_page = $.phonegap.pageManage.page(cur_page).activityPage;  //页面
    }
    if (cur_page == this.name) {
    this.scroll_length = scrollY;
    }
    }
可能每个人的写法不一样的但是思想是差不多的。这就是我实现的所有代码。欢迎指出不足!
1
2
分享到:
评论

相关推荐

    记录页面停留时间和遮罩层

    在网页设计和用户体验优化中,记录页面停留时间和实现遮罩层是两个重要的技术点。页面停留时间可以帮助开发者和网站所有者了解用户对特定内容的兴趣程度,而遮罩层则常用于提示、加载或阻挡背景干扰,提升交互体验。...

    记录用户停留时间

    在这个案例中,可以在此事件中初始化计时器,当用户进入页面(action.aspx)时开始计算停留时间。 2. `$(window).unload()`:这个事件在用户离开当前页面时触发,可以用于停止计时器并保存数据。当用户从action....

    javascript页面导航特效

    通过 JavaScript,我们可以实现浮动菜单,即当用户滚动页面时,菜单始终保持在屏幕的一角,这样用户始终能够方便地访问导航链接。同时,使用 JavaScript 还可以实现响应式设计,确保在不同设备和屏幕尺寸上的良好...

    页面滚动到一定位置切换栏被固定,且可以随意查看页面的某些内容

    在网页设计中,"页面滚动到一定位置切换栏被固定,且可以随意查看页面的某些内容" 这一技术通常被称为“固定导航栏”或“粘性导航”。它是一种优化用户体验的设计模式,允许用户在浏览长页面时始终保持关键的导航...

    javascript 简单幻灯片切换

    利用javascript制作的简单幻灯片切换

    标签(Tabs)实现多页面切换

    在标签页切换时,我们并不需要一次性加载所有页面内容,而是可以在用户切换到特定标签时动态加载对应的内容。这不仅节省了首屏加载时间,还降低了对用户网络的要求。我们可以使用JavaScript的DOM操作(如`document....

    HTML5页面,上下切换页面效果

    首先,我们要理解HTML5的核心特性之一是离线存储能力,通过`Application Cache`或`Service Worker`,可以预先加载和缓存页面资源,使得即使在离线状态下也能快速访问页面,模拟原生应用的体验。 其次,CSS3的过渡...

    网页记录用户浏览时长次数

    总结,本项目提供的测试代码展示了如何利用JavaScript在前端实现记录用户浏览时长和访问次数的功能。通过结合`setTimeout`或`setInterval`、事件监听以及本地存储和服务器通信,我们可以有效地收集和分析用户行为...

    JS实现Tab内容切换,页面不刷新,内容切换,网址变化

    本主题聚焦于使用JavaScript(JS)来实现在不刷新页面的情况下,实现Tab内容的切换,并且在切换过程中使网址相应地变化,提升用户体验。以下是对这一技术的详细讲解: 首先,我们需要理解URL(统一资源定位符)对于...

    bootstrap实现页面切换

    1. **Bootstrap导航系统**:Bootstrap提供了多种导航组件,如导航条(Navbar)、 Pills 和 Tabs,它们可以帮助用户在多个页面间轻松切换。例如,Navbar可以固定在顶部,展示网站的主要链接,当点击链接时,页面会...

    html5 滑动页面切换tab

    2. 触摸事件优化:处理触摸事件时,防止滚动事件的默认行为(`e.preventDefault()`),以确保只有Tab切换而不会触发页面滚动。 3. 响应式设计:确保滑动切换在不同屏幕尺寸和设备上都能良好工作,可能需要调整Tab...

    JavaScript图文混排滑动切换效果.rar

    当鼠标光标停留在文字上时,JavaScript会触发相应的函数,展示与该文字相关的图片。这种技术可以增强网页的视觉吸引力,使文章排行或产品展示更具动态感。 实现这一效果可能涉及以下JavaScript知识点: 1. **DOM...

    asp.net多页签页面切换

    在ASP.NET开发中,实现多页签页面切换是一种常见的用户界面设计,它可以提供更好的用户体验,让用户在一个页面上浏览和操作多个相关的内容区域。本篇将详细介绍如何在ASP.NET环境中实现这样的功能,主要涉及的知识点...

    购物车 静态页面 含javascript

    在构建一个购物网站时,购物车页面是必不可少的组成部分,它允许用户查看所选商品、调整数量、计算总价以及进行结账操作。本项目“购物车静态页面含JavaScript”就是一个专注于实现这些功能的示例。这个页面是静态的...

    html5支持手机端层叠页面点击导航切换

    此外,flexbox布局模型或者grid布局模型可以方便地管理导航条及子页面的位置和大小,实现灵活的布局切换。 JavaScript也是实现点击导航切换不可或缺的部分。通过监听点击事件,我们可以控制页面的跳转和动画效果。...

    JavaScript写的sohu团购顶部切换城市导航,可打开关闭在顶部,方便在其他城市之间切换。

    同时,JavaScript还负责处理点击事件,当用户选择某个城市时,会更新当前显示的城市,并可能将选择的城市信息存储在Cookie或LocalStorage中,以便用户下次访问时能快速恢复其选择。 为了使城市导航可打开和关闭,...

    js.zip_js切换页面_切换标签页

    在JavaScript(JS)编程中,页面的动态切换和标签页管理是常见的功能需求,尤其在构建Web应用程序时。本文将详细讲解如何使用JavaScript实现页面的切换以及切换标签页的技巧。 首先,我们要理解JavaScript的基本...

    网页状态栏页面停留时间特效.rar

    网页状态栏页面停留时间特效是一种常见的用户体验设计,它利用JavaScript(JS)技术来展示用户在特定页面上停留的时间。这种特效通常以动态的形式显示在浏览器的状态栏或页面的某个角落,帮助用户感知他们在当前页面...

    js 无限切换面板,javascript 制作切换面板

    js 无限切换面板 js 无限切换面板,javascript 制作切换面板

    PHP记录页面停留时间的方法

    首先,需要在客户端的页面中嵌入JavaScript代码,该段代码会在用户离开页面时触发,从而计算出用户在页面上停留的时间。具体实现方法如下: 1. 页面加载时,JavaScript会创建一个新的Date对象dt1,记录用户进入页面...

Global site tag (gtag.js) - Google Analytics