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;
}
}
可能每个人的写法不一样的但是思想是差不多的。这就是我实现的所有代码。欢迎指出不足!
分享到:
相关推荐
在网页设计和用户体验优化中,记录页面停留时间和实现遮罩层是两个重要的技术点。页面停留时间可以帮助开发者和网站所有者了解用户对特定内容的兴趣程度,而遮罩层则常用于提示、加载或阻挡背景干扰,提升交互体验。...
在Vue.js应用中,我们经常需要使用路由进行页面间的切换,但默认情况下,当用户从一个页面切换到另一个页面时,之前的页面状态会被重置,包括滚动位置。为了解决这个问题,Vue提供了一个名为`keep-alive`的组件,它...
在本项目中,"JavaScript图片切换展示效果.rar"包含了实现这一功能的代码和其他相关资源。 首先,我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的客户端脚本语言,它允许开发者在用户的浏览器上运行...
在实现图片切换效果时,我们通常会利用JavaScript的DOM(Document Object Model)操作,改变HTML元素的属性,如src(源),来实现图片的切换。 标题“多图片切换效果JavaScript实现”指的是一种能够动态展示多张...
我们用`index`变量记录当前页面的位置,并使用模运算符实现循环切换。`#switchBtn`是切换按钮的ID,你可以根据实际需求更改或添加其他触发事件。 为了提高用户体验,我们还可以添加一些过渡效果,比如淡入淡出。这...
pageSwitch.js是一款支持121种页面切换效果的javascript页面切换插件。pageSwitch插件适用场景为全屏切换,即一切一屏。它支持桌面和移动手机,支持多达121种切页效果,还支持自定义切页动画。
在网页设计中,"页面滚动到一定位置切换栏被固定,且可以随意查看页面的某些内容" 这一技术通常被称为“固定导航栏”或“粘性导航”。它是一种优化用户体验的设计模式,允许用户在浏览长页面时始终保持关键的导航...
在标签页切换时,我们并不需要一次性加载所有页面内容,而是可以在用户切换到特定标签时动态加载对应的内容。这不仅节省了首屏加载时间,还降低了对用户网络的要求。我们可以使用JavaScript的DOM操作(如`document....
首先,我们要理解HTML5的核心特性之一是离线存储能力,通过`Application Cache`或`Service Worker`,可以预先加载和缓存页面资源,使得即使在离线状态下也能快速访问页面,模拟原生应用的体验。 其次,CSS3的过渡...
本主题聚焦于使用JavaScript(JS)来实现在不刷新页面的情况下,实现Tab内容的切换,并且在切换过程中使网址相应地变化,提升用户体验。以下是对这一技术的详细讲解: 首先,我们需要理解URL(统一资源定位符)对于...
1. **Bootstrap导航系统**:Bootstrap提供了多种导航组件,如导航条(Navbar)、 Pills 和 Tabs,它们可以帮助用户在多个页面间轻松切换。例如,Navbar可以固定在顶部,展示网站的主要链接,当点击链接时,页面会...
2. 触摸事件优化:处理触摸事件时,防止滚动事件的默认行为(`e.preventDefault()`),以确保只有Tab切换而不会触发页面滚动。 3. 响应式设计:确保滑动切换在不同屏幕尺寸和设备上都能良好工作,可能需要调整Tab...
当鼠标光标停留在文字上时,JavaScript会触发相应的函数,展示与该文字相关的图片。这种技术可以增强网页的视觉吸引力,使文章排行或产品展示更具动态感。 实现这一效果可能涉及以下JavaScript知识点: 1. **DOM...
在ASP.NET开发中,实现多页签页面切换是一种常见的用户界面设计,它可以提供更好的用户体验,让用户在一个页面上浏览和操作多个相关的内容区域。本篇将详细介绍如何在ASP.NET环境中实现这样的功能,主要涉及的知识点...
在描述中提到的“jQuery带导航自动切换”,意味着当用户滚动页面时,导航菜单会根据当前可视页面的内容自动更新,这可以提供连续且一致的导航体验。这样的功能通常是通过监听滚动事件,然后计算滚动条位置来实现的。...
在JSP页面中,可以编写一段JavaScript代码,每隔固定时间向服务器发送异步请求(AJAX)获取当前的停留时间,然后更新页面内容。 5. **计算停留时间**: 当收到新的AJAX请求时,服务器端检查当前Session的创建时间...
在Web开发中,页面切换动画是提升用户体验的重要手段之一。它们可以使用户在浏览网页时感受到流畅的过渡效果,增加互动性和吸引力。本篇文章将详细探讨如何利用JavaScript(JS)和CSS(Cascading Style Sheets)技术...
在实现滚动位置记忆功能时,主要的思路是利用keep-alive的特性,在页面切换时记录下当前滚动位置,并在页面重新激活时恢复滚动位置。 步骤一:在路由中设置keepAlive属性 要实现这个功能,首先要对需要缓存的路由...
"jQuery平滑页面滚动切换特效"是一种广泛应用于现代网站的技术,它通过JavaScript库jQuery实现,能够使页面在滚动时呈现出流畅的动画效果,使得用户的浏览过程更为舒适。本篇文章将深入探讨这一特效的实现原理、步骤...
小客户端在接收到这个命令后,解析其中的信息,并执行页面跳转操作,通常是通过JavaScript的`window.location.href`属性来实现。 为了实现这个功能,我们需要以下关键组件: 1. **WebSocket服务器**:服务器需要...