`

返回上一页,停留在上次浏览的位置

阅读更多

最近做了些H5页面(文章页面),用户提了些常用的需求:返回上一页,停留在上次浏览的位置

搜索了些资料和抄抄前端妹子的代码,实现如下:

 

            //返回上次浏览的位置

            var sortId = $("#sortId").val();  //这篇文章的唯一标识id

            var str = sortId + 'scrollTop';

            ////localStorage 方法存储的数据没有时间限制(从localStorage获取位置数据,类似于memcached)

            var scrollTop = localStorage.getItem(str); 

            // alert(scrollTop);

            if(scrollTop){

              $('body').scrollTop(scrollTop);

            }else{

              $('body').scrollTop(0);

            }

            //保存浏览位置

            $('body').on('touchmove', function(event) {

              // event.preventDefault();

              console.log($('body').scrollTop());

              var scrollTop = $('body').scrollTop();

              var sortId = $("#sortId").val();

              var str = sortId + 'scrollTop';

              localStorage.setItem(str,scrollTop);  //存储位置数据

            });

 

//已调通测试,将代码放入文章页面。

 

分享到:
评论

相关推荐

    用户停留浏览页面的时间统计

    在IT行业中,用户停留浏览页面的时间统计是一项重要的数据分析工作,它可以帮助网站或应用的开发者、运营者了解用户的行为模式,优化用户体验,提升用户黏性。本篇将详细探讨这一技术的实现原理、方法以及可能的应用...

    vue返回上一页面时回到原先滚动的位置的方法

    通过上述方法,便可以确保在使用Vue.js开发的应用中,无论是返回上一页面还是从详情页面返回列表页面,用户的滚动位置都能得到保持,从而优化用户的浏览体验。 以上介绍的方法主要是通过结合Vue.js的生命周期钩子、...

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

    3. 计算两者的差值即为用户在页面上的停留时间:`duration = endTime - startTime`。 4. 可以将这个时间发送到服务器进行统计分析,通常通过Ajax异步请求实现。 为了更精确地跟踪用户行为,还可以结合其他技术,如`...

    解决微信内置浏览器返回上一页强制刷新问题方法

    而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置。 BINGO~ 通过HTML5的history API + 缓存可以做到这一点。 执行原理: 1.0、通过history API的 history....

    js中document.referrer实现移动端返回上一页

    在移动设备上实现页面之间的流畅跳转,特别是在需要返回上一页时,用户体验尤为关键。在PC端,我们可以通过history.go(-1)或者history.back()方法实现返回上一页的功能,简单且有效。但在移动端,尤其是原生应用和...

    记录用户停留时间

    在IT领域,记录用户停留时间是一项非常重要的任务,它能够帮助我们分析用户行为,优化网站体验,提升转化率。在这个项目中,开发者使用了jQuery这一流行的JavaScript库来实现这一功能。接下来,我们将深入探讨如何...

    手机浏览器物理返回劫持,自定义点击返回的操作

    在移动互联网领域,用户在浏览网页时经常使用手机的物理返回键进行页面的回退操作。然而,有时候开发者为了特定的交互需求或者安全考虑,可能会选择劫持这一默认行为,即自定义点击返回按钮的操作。这在技术实现上...

    统计用户停留的时间

    综上所述,通过JavaWeb和JSP技术,我们可以构建一个系统来实时追踪并显示用户在网站上的停留时间。这个过程涉及到服务器端Session管理、前端JavaScript定时器以及AJAX通信等多个技术环节。在实际应用中,还需要考虑...

    采用JavaScript统计用户在网页的停留时间代码

    本篇文章将详细介绍如何使用JavaScript来统计用户在一个网页上的停留时间。该方法通过设置定时器的方式不断更新时间值,并将其显示在页面上,同时当用户的停留时间达到一定条件时(例如1分钟),会弹出提示框提醒...

    访客站点停留时间和页面停留时间的实现方案

    一种计算方式是将用户在不同标签页的浏览行为视作不同的会话(Session),并为每个Tab页记录独立的页面停留时间和站点停留时间。例如,用户在首页的Tab页上停留了5分钟,在页面2停留了25分钟,在页面3的停留时间没有...

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

    网页状态栏页面停留时间特效是一种常见的用户体验设计技术,它能够为用户提供有关他们在网站上花费时间的视觉反馈。这种效果通常通过JavaScript实现,可以显示在浏览器的状态栏或者自定义的UI元素上,帮助用户感知...

    利用js实现在浏览器状态栏显示访问者在本页停留的时间

    在网页开发中,有时我们需要跟踪用户在特定页面上的停留时间,以便提供个性化体验或收集用户行为数据。本文将详细介绍如何利用JavaScript(JS)实现在浏览器的状态栏显示访问者在当前页面停留的时间。这个功能通常...

    TabLayout上下滑动标题停留顶部

    本文将深入探讨如何实现一个`TabLayout`,使得它在上下滑动时能够停留在页面顶部,这种效果通常与`CoordinatorLayout`和`ViewPager`结合使用。我们将详细解析`CoordinatorLayout`、`TabLayout`以及`ViewPager`的工作...

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

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

    返回键劫持(可以无限次)

    在本案例中,“可以无限次”的描述暗示了这是一种可以持续影响用户浏览历史的劫持方式,即用户点击返回键不会像正常情况下那样回到上一页面。 在网页开发中,开发者可能会利用JavaScript或者其他前端技术来监听并...

    停留点发现算法

    它旨在识别出在一系列连续的位置点中,移动对象长时间停留的位置,这些位置通常代表了某种活动或者兴趣点。 在数据挖掘的过程中,停留点发现是针对大量GPS轨迹数据进行预处理的重要步骤。GPS轨迹是由一系列时间戳...

    解决外接显示器关闭后程序窗口停留问题

    2. **第三方应用程序设置**:部分应用程序可能会记录窗口位置,并在下次启动时恢复到上次关闭时的位置。如果这些程序在关闭时记录了外接显示器上的位置,则会在没有外接显示器的情况下尝试恢复该位置,从而导致窗口...

    顾及停留位置特征提取的个人位置预测方法.docx

    停留位置表示用户在一个区域内活动一段时间,可以用其边界内GPS点的平均经度、纬度,以及进入和离开时间来定义。这种停留位置的识别有助于更深入地理解用户的活动模式,从而提高预测准确性。 总的来说,本文提出的...

    listview 顶部停留

    这种功能通常用于实现分类头部或者标题的固定显示,以便用户在浏览长列表时能快速定位和识别不同类别。在给定的"listview 顶部停留"主题中,我们将探讨如何实现这一效果。 首先,Android原生的ListView并不直接支持...

Global site tag (gtag.js) - Google Analytics