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...
5. **优化**:为了提高性能和用户体验,可能需要考虑添加防止快速连续切换的缓冲机制,以及在图片切换时预加载下一幅图片,减少延迟。 在压缩包中的"自动图片切换导航特效(JavaScript)"文件,可能包含了实现这个...
此外,flexbox布局模型或者grid布局模型可以方便地管理导航条及子页面的位置和大小,实现灵活的布局切换。 JavaScript也是实现点击导航切换不可或缺的部分。通过监听点击事件,我们可以控制页面的跳转和动画效果。...
在JSP页面中,可以编写一段JavaScript代码,每隔固定时间向服务器发送异步请求(AJAX)获取当前的停留时间,然后更新页面内容。 5. **计算停留时间**: 当收到新的AJAX请求时,服务器端检查当前Session的创建时间...
在Web开发中,页面切换动画是提升用户体验的重要手段之一。它们可以使用户在浏览网页时感受到流畅的过渡效果,增加互动性和吸引力。本篇文章将详细探讨如何利用JavaScript(JS)和CSS(Cascading Style Sheets)技术...
简繁体语言版本切换 ...简繁体语言版本切换可以通过JavaScript来实现,通过设置默认语言版本和延时翻译来实现语言的切换,并且可以使用Cookie来存储当前语言版本,以便于在下次访问时可以恢复当前语言版本。
在页面风格切换中,JavaScript主要用于监听用户的操作,如点击按钮,然后动态改变CSS样式表的引用,达到切换页面风格的效果。 1. **HTML结构**: 在HTML文档中,我们需要创建一个元素(如按钮)供用户触发风格切换...
"jQuery平滑页面滚动切换特效"是一种广泛应用于现代网站的技术,它通过JavaScript库jQuery实现,能够使页面在滚动时呈现出流畅的动画效果,使得用户的浏览过程更为舒适。本篇文章将深入探讨这一特效的实现原理、步骤...
在网页设计中,大页面切换菜单是一种常见的特效,它能够提升用户体验,使用户在浏览大型或多内容页面时更加便捷。这种菜单通常会在有限的屏幕空间内展示大量信息,通过滑动、缩放或平移等动画效果实现页面间的切换。...