美文网首页
JS 点击商品进入详情,返回后,回到原来的位置

JS 点击商品进入详情,返回后,回到原来的位置

作者: 我的头好大呀呀呀 | 来源:发表于2016-12-06 11:40 被阅读0次

这个方法是一个通过的方法,不需要每个页面都写一次,这是利用cookie完成的,把记录的滚动条的位置放入cookie,下次进入这个页面的时候读取cookie,并设置滚动条位置为cookie中的值,从而让滚动条回到上一次的位置,实现返回上一次浏览的位置,如果多个页面要使用这个功能,那就要定义多个cookie来记录不同页面滚动高度,为了解决这个问题使用了一个相对简单的方法,就是cookie的值是以页面的文件名命名,js中创建cookie时,自动获取网页路径,截取页面的文件名,并将cookie名设置为此文件名,这样就可以避免多次命名,从而减少了代码

具体实现的代码如下:

/*返回上次浏览位置*/

$(function () {

var str = window.location.href;

str = str.substring(str.lastIndexOf("/") + 1);

if ($.cookie(str)) {

$("html,body").animate({ scrollTop: $.cookie(str) }, 1000);

}

else {

}

})

$(window).scroll(function () {

var str = window.location.href;

str = str.substring(str.lastIndexOf("/") + 1);

var top = $(document).scrollTop();

$.cookie(str, top, { path: '/' });

return $.cookie(str);

})

/*返回上次浏览位置*/

引入jquery和jquery.cookie.js

在线jquery.cookie.js路径:'https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js'

相关文章

  • JS 点击商品进入详情,返回后,回到原来的位置

    这个方法是一个通过的方法,不需要每个页面都写一次,这是利用cookie完成的,把记录的滚动条的位置放入cookie...

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

    项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试...

  • Flutter基础篇02--页面跳转与传值

    先给出代码demo 显示效果如下图: 点击某一个cell,进入详情页,在详情页展示商品描述;页面返回时,又把商品描...

  • 返回与卸载组件刷新数据

    贴标签后再取消,点击安卓手机自带的返回键,返回到个人详情界面,没有刷新

  • 交互细节-NO.1

    京东商品详情页,上拉查看图文详情后,左上角返回,是回到上级页面,误以为回到顶部。 因为到达图文详情后,看起来是完全...

  • vue2路由之指定滑动位置scrollBehavior

    移动端开发当出现列表页是,下拉刷新到底部,然后点击某条数据进入到详情页,然后点击返回,回到上次列表页滑动的位置,这...

  • HTML5新特性history pushState/replac

    现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置。1.首先,先了...

  • vue单页面实现返回不刷新

    前言:对于前端,都会遇到这么一个场景。例如列表页面,点击相应列表,进入详情页面,在详情页返回到列表页面时,需要返回...

  • js列表页面跳转详情,返回原来的位置

    思路:1.记录当前滚动条的位置,2.记录当前页面的数据,3.记录当前加载到第几页;存储到storage中,再次进来...

  • react上拉加载

    react上拉加载(元素,滚动条在元素上) js css 下次将列表页进入详情页之后,返回时,记录进入时的位置~~~

网友评论

      本文标题:JS 点击商品进入详情,返回后,回到原来的位置

      本文链接:https://www.haomeiwen.com/subject/gafrmttx.html