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 相关文章推荐
基于jQuery的弹出框插件
Mar 18 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
详解React中的组件通信问题
Jul 31 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
js动态添加带圆圈序号列表的实例代码
Feb 18 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实现文件安全下载
2006/10/09 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
js类 from qq
2006/11/13 Javascript
Stop SQL Server
2007/06/21 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
django 模版关闭转义方式
2020/05/14 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
银行存款证明样本
2014/01/17 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
员工年度工作总结2015
2015/05/18 职场文书
勇敢的心观后感
2015/06/09 职场文书
第一军规观后感
2015/06/12 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android