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


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 相关文章推荐
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
node.js文件上传处理示例
Oct 27 Javascript
vue实现购物车结算功能
Jun 18 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
typescript编写微信小程序创建项目的方法
Jan 29 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
php中rename函数用法分析
2014/11/15 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js切换光标示例代码
2013/10/10 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
javascript关于继承解析
2016/05/10 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
大学军训决心书
2015/02/05 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
寻找成龙观后感
2015/06/12 职场文书
Django操作cookie的实现
2021/05/26 Python
详细介绍python类及类的用法
2021/05/31 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python