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


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 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 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
日本十大惊悚动漫
2020/03/04 日漫
PHP常用函数小技巧
2008/09/11 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
初学者学习Python好还是Java好
2020/05/26 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
五年级上册复习计划
2015/01/19 职场文书