JS实现页面进入和返回定位到具体位置


Posted in Javascript onDecember 08, 2016

其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能。正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了。例如,某些元素是在某种情况下才加上的,又或者多级定位。

目前,我知道的返回定位到具体位置有两种方法:

①利用id定位,在跳转的时候带上某个模块的id,返回的时候定位到该处。

②利用距离顶部的距离,在跳转的时候带上当前位置滚动过的距离,返回的时候定位到该处。

一般应用场景:

定位到某一个模块的时候,有二级定位的时候利用方法①.

定位到具体位置的时候,定位到某一个模块的时候,利用方法②。

有二级定位的时候具体实现方法:

1.常见的场景就是有一个tab模块,tab模块下面有相应的内容,进入的时候需要定位到某个tab的某个位置。

场景如图:

2..初始化页面的时候,需要给每个模块指定一个唯一的id。打开页面的时候,如果url带着位置参数则解释参数定位,如果没有,默认为第一个。代码逻辑如下:

function() initPos{//定位,主要是初始化第几个tab
var hashs = location.hash.slice(1).split('&');
hashs = hashs.map(function(hash){
return decodeURIComponent(hash)
})
if(parseInt(hashs[0])>=0&&parseInt(hashs[0])<100){
navHash = parseInt(hashs[0]) 第几个tab
contentHash = hashs[1] tab下的具体模块id
}
}
var $root=$('ul');
if(navHash && $root.find('li')[navHash].length){
$root.find('li')[navHash].addClass('cur'); 
}else{
$root.find('li')[0].addClass('cur');
}
loadTabContent(tabIndex,initContent);//加载对应tab下面的内容

注意,如果tab下的内容是后来加载的,可能会出现,解析到url后。在页面上,由于加载时间的关系,没有找到对应的tab下面具体模块的id。这时候会定位不成功。所以还需要在加载好数据之后,再保证一下。

保证逻辑:

if(contentHash){
var _contentHash = contentHash;
window.onload = function(){
setTimeout(function(){
location.hash = _contentHash;
},0)
} 
contentHash = '';
}

利用距离顶部的距离定位的具体实现方法:

1.页面有跳转的地址,不是直接link过去。要带着当前位置滚动过距离跳转。

$('[data-link]').on('click',function(event) { //阻止默认跳转行为,阻止冒泡<br> event.preventDefault();
event.stopPropagation();
savePage();
window.location.href=$(this).attr('data-link');
});
function savePage(){ //操作浏览器的历史记录
history.replaceState('', document.title, location.href.replace(location.hash, "") + "#nowTop=" + $(window).scrollTop());
}

两种实现方式的原理和实现都非常简单。不过要思路清晰才行,不然很容易出错。

以上所述是小编给大家介绍的JS实现页面进入和返回定位到具体位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript跨域刷新实现代码
Jan 01 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
解析利用javascript如何判断一个数为素数
Dec 08 #Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 #Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 #Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 #Javascript
浅谈JavaScript的闭包函数
Dec 08 #Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 #Javascript
Vue.JS入门教程之自定义指令
Dec 08 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
一个odbc连mssql分页的类
2006/10/09 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
react build 后打包发布总结
2018/08/24 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
python环境路径配置以及命令行运行脚本
2019/04/02 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
房地产开盘策划方案
2014/02/10 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
共产党员公开承诺书
2014/03/25 职场文书
员工合理化建议书
2014/05/19 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP