JS如何实现在页面上快速定位(锚点跳转问题)


Posted in Javascript onAugust 14, 2017

本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下:

1. 锚点跳转简介

锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。

锚点跳转有两种形式:

  • a标签 + name / href 属性
  • 使用标签的id属性

在html 4.0以前,只有使用 <a> 标签的 name 属性才能创建片段标识符。id 属性的出现,使所有 HTML 或 XHTML 元素都可以是片段标识符。这是因为 id 标识符几乎可以用在所有的标签中。<a> 标签为了能够和以前的版本相兼容而保留了 name 属性,同时也可以使用 id 属性。这些属性可以相互交换使用,可以把 id 属性看作是 name 属性的升级版本。name 和 id 属性都可以与 href 属性结合起来使用,这样一个 <a> 标签就可以同时作为超链接和片段标识符使用。

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a>
<a href="#f" rel="external nofollow" ></a>

但是这种方法使用了一个空标签,而且有时候会出现锚点失效。所以建议采用id来绑定锚点,代码如下:

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a><h2 id="#de">波轮洗衣机介绍</h2>

2. 含锚点跳转的URL地址

window.location.hash

【1】关于#

在页面的制作中,“#”的符号很常见,并且具有通用性。基本上,其表示的含义是id选择符。同样的,在页面的URL中,#也可以理解为id选择符之意,也就是页面跳转到含URL指向的id标签处。
例如输入一个地址https://3water.com/view/121414.htm?pf=1#3

这个地址中末尾有个'#',这个就相当于告诉浏览器要跳转了,#后面跟着的3表示会在https://3water.com/view/121416.htm?pf=1的页面中寻找符合#3特点的标签并且执行跳转。

【2】关于空锚点指向

如果URL中的#后面跟随的字符id在文中找不到,就会有两种情况:如果是在当前页面,除了URL地址变化了,其他的不会改变,页面不会有跳转;如果是从其他页面跳转过来,则页面会在顶部显示,'#'基本就是摆设。

【3】window.location.hash

用来获取或设置页面的标签值。https://3water.com/article/22656.htm?dasdsa

3. Jquery下锚点的平滑跳转。

如果让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置如下:

$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)

JS原生实现。

scrollTo() 方法可把内容滚动到指定的坐标。

scrollTo(xpos,ypos);

4. IE下锚点刷新失效及JQuery下的解决

【1】关于锚点刷新失效

锚点刷新失效就是指当按下刷新键F5时,即使此时URL的后面就随锚点,此锚点也是不起作用的。

【2】在Jquery中,不难实现。可以根据URL获取锚点,从而进一步获得对应锚点对象,然后再让页面的滚动高度为其距离页面

顶部的偏移值就可以了。使得页面无论是重新载入还是其刷新,其后面的锚点都起作用。

$(function() {
  var url = window.location.toString();
  var id = url.split('#')[1];
  if (id) {
    var t = $('#' + id).offset().top;
    $(window).scrollTop(t);
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
jquery随机展示头像代码
Dec 21 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
AngularJS指令用法详解
Nov 02 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
Vue动态组件实例解析
Aug 20 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 #Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 #Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 #Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 #Javascript
JS原生数据双向绑定实现代码
Aug 14 #Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
关于在mongoose中填充外键的方法详解
Aug 14 #Javascript
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python实现的购物车功能示例
2018/02/11 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Python实现验证码识别
2020/06/15 Python
python的数学算法函数及公式用法
2020/11/18 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
质检员的岗位职责
2013/11/15 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
股东合作协议书范本
2014/04/14 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
九九重阳节标语
2014/10/07 职场文书
职代会闭幕词
2015/01/28 职场文书
党员带头倡议书
2015/04/29 职场文书
老员工辞职信范文
2015/05/12 职场文书
会议主持词开场白
2015/05/28 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
人民币符号
2022/02/17 杂记