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


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中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
vue路由拦截及页面跳转的设置方法
May 24 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Python中的列表知识点汇总
2015/04/14 Python
python Django框架实现自定义表单提交
2016/03/25 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python实现分页效果
2017/10/25 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python实现烟花小程序
2019/01/30 Python
Django 路由层URLconf的实现
2019/12/30 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
方正Java笔试题
2014/07/03 面试题
2014年大学团支部工作总结
2014/12/02 职场文书