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实现”指的是一种能够动态展示多张...
"切换页面"是JavaScript中常见的应用场景,主要用于实现用户在多个页面之间自由跳转,无需每次操作都刷新整个网页。下面将详细讨论如何使用JavaScript实现页面切换及其相关知识点。 首先,页面切换的基础是DOM...
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...
在ASP.NET开发中,实现多页签页面切换是一种常见的用户界面设计,它可以提供更好的用户体验,让用户在一个页面上浏览和操作多个相关的内容区域。本篇将详细介绍如何在ASP.NET环境中实现这样的功能,主要涉及的知识点...
在页面切换这个场景下,JavaScript发挥着至关重要的作用,它能够实现动态、交互式的用户体验,而无需用户手动刷新整个页面。 一、JavaScript页面切换原理 在传统的网页设计中,页面之间的跳转通常依赖于HTML的`<a>`...
此外,flexbox布局模型或者grid布局模型可以方便地管理导航条及子页面的位置和大小,实现灵活的布局切换。 JavaScript也是实现点击导航切换不可或缺的部分。通过监听点击事件,我们可以控制页面的跳转和动画效果。...
在描述中提到的“jQuery带导航自动切换”,意味着当用户滚动页面时,导航菜单会根据当前可视页面的内容自动更新,这可以提供连续且一致的导航体验。这样的功能通常是通过监听滚动事件,然后计算滚动条位置来实现的。...
在JSP页面中,可以编写一段JavaScript代码,每隔固定时间向服务器发送异步请求(AJAX)获取当前的停留时间,然后更新页面内容。 5. **计算停留时间**: 当收到新的AJAX请求时,服务器端检查当前Session的创建时间...
javascript 秒表,页面保存10次记录
本教程将深入探讨如何使用JavaScript来实现各种页面特效。 首先,我们需要理解JavaScript的基本语法。JavaScript是基于原型的对象导向语言,支持函数作为一等公民。变量在声明时无需指定数据类型,可以动态转换。`...
在Web开发中,页面切换动画是提升用户体验的重要手段之一。它们可以使用户在浏览网页时感受到流畅的过渡效果,增加互动性和吸引力。本篇文章将详细探讨如何利用JavaScript(JS)和CSS(Cascading Style Sheets)技术...