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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
防止文件缓存的js代码
Jan 10 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
解析利用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
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP实现的简单日历类
2014/11/29 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
javascript如何创建对象
2016/08/29 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
Three.js基础部分学习
2017/01/08 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
社区工作者感言
2014/03/02 职场文书
优秀班组事迹材料
2014/12/24 职场文书
导游词之张家界
2019/10/31 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL