页面内锚点定位及跳转方法总结(推荐)


Posted in Javascript onApril 24, 2019

接着上一篇,其实是一个功能,本来感觉挺简单的一个问题,没想到遇到两个坎儿,无语。。。

上一篇是关于scroll事件绑定的问题,这一篇的问题是:点击锚点跳转到相应DIV的问题。

最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      height: 800px;
      width: 400px;
      border: 2px solid black;
    }
    h2 {
      position: fixed;
      margin:50px 500px;
    }
  </style>
</head>
<body>
  <h2>
    <a href="#div1" rel="external nofollow" >to div1</a>
    <a href="#div2" rel="external nofollow" >to div2</a>
    <a href="#div3" rel="external nofollow" >to div3</a>
  </h2>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
</body>
</html>

这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。 

第二种方式是在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,感觉跟第一种方法没区别,甚至更麻烦。

第三种方法是用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript"><br>$(document).ready(function() {
  $("#div1Link").click(function() {
    $("html, body").animate({
      scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#div2Link").click(function() {
    $("html, body").animate({
      scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#div3Link").click(function() {
    $("html, body").animate({
      scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
});
1
</script>

注意:运行上面的脚本的之前,先将为锚点增加相应的id,同时去掉href属性。

 

$("html, body")可以替换为响应的div,如果不起作用,试着给该div增加overflow:scroll属性。

另外,脚本可以进一步优化,自己来试试

这样做的好处是:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。

缺点是:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。

第四种方法是用js的srollIntoView方法,直接用:

document.getElementById("divId").scrollIntoView();

这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的。

推介大家用第四种,我依次试了前三种,都有各种问题(可能是页面较复杂的缘故吧,当然,技术不咋也是。。。)  

以上所述是小编给大家介绍的页面内锚点定位及跳转方法总结详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
详解Vue项目中实现锚点定位
Apr 24 #Javascript
微信小程序中使用echarts的实现方法
Apr 24 #Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 #Javascript
详解微信小程序开发用户授权登陆
Apr 24 #Javascript
微信小程序实现的一键拨号功能示例
Apr 24 #Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 #Javascript
微信小程序实现的图片保存功能示例
Apr 24 #Javascript
You might like
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
javascript some()函数用法详解
2014/11/13 PHP
php常用文件操作函数汇总
2014/11/22 PHP
php单例模式示例分享
2015/02/12 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python实现简单井字棋小游戏
2020/03/05 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
竞选演讲稿范文
2013/12/28 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书